CSS float相关介绍入门基础知识_float指南教程

一、float介绍float元素也称为浮动元素,设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。简单来说,就是让block元素无视float元素,让inline元素让流水一样围绕着float元素来实现浮动布局。 文字环绕图片是float典型的应用场景,如下所示:h

CSS float相关介绍入门基础知识

一、float介绍

CSS float相关介绍入门基础知识_float指南教程

float元素也称为浮动元素,设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。简单来说,就是让block元素无视float元素,让inline元素让流水一样围绕着float元素来实现浮动布局。 文字环绕图片是float典型的应用场景,如下所示:

CSS float相关介绍入门基础知识_float指南教程

html代码

<img class="float" src="image/HC5450_15-IMS-zh_CN.jpg" />
<p class="around">华夏之大,有造物之工师,兼创器之良匠,留下传世之美。有些器物,不仅仅需要玻璃罩的保护,更需要心手合一的把玩。摩挲盘桓,实为栖心之境。古而近雅,追求老器物绝不是一味的泥古,而是追求内心的安定,古物经历过时间,消除了火气,更显得雍穆沉静。不入古境,不解其情,若入古境,自得况味,这便是时间的艺术。</p>

css代码

.float{
  float:left;
  width:100px;
  height: auto;
  margin: 10px;
}
.around{
  width:300px;
  color:#fff;
  background: #009F95;
  padding: 10px;
}

由上图可以看出,img元素设置了float:left之后会脱离文档流而居于左侧存在。而p元素无视img元素的存在,从窗口的左上角开始流入,但是p元素中的文字意识到img元素的存在而环绕图片流入。并且img元素是漂浮在p元素的上层。

二、float元素特性

1.块级框

不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。

(1)先来看一个块级元素的例子:

CSS float相关介绍入门基础知识_float指南教程

html代码

<div class="div1">
  <img src="image/pic1.png" />
</div>
<div class="div2">
  <img src="image/pic2.png" />
</div>

css代码

.div1{
  padding: 10px;
  border: 3px solid black;
}
.div2 {
  float: left;
  padding:10px;
  border: 3px solid red;
}

默认情况下,div元素的宽是100%,一旦让该div浮动起来,立刻会像inline元素一样产生包裹性,宽度会跟随内容自适应。

(2)接着看下行内元素的例子:

CSS float相关介绍入门基础知识_float指南教程

html代码

<div class="box">
  <span class="menu">首页</span>
  <span class="menu">消息</span>
  <span class="menu">朋友</span>
  <span class="menu">我的</span>
</div>

css代码

.box{
  width: 500px;
  background: pink;
  height: 200px;
}
.menu{
  width: 100px; 
  float: left; 
  margin: 10px; 
  padding: 10px; 
  background: #eee; 
  text-align: center; 
}

由上图可见,当span设置float属性后,可以指定width,height值。 同时可以发现,当多个元素指定为float且同时为left/right时,元素是紧挨着排列,行内宽度不够时再换行排列。

2.高度崩塌

CSS float相关介绍入门基础知识_float指南教程

html代码

<div class="div1">
  <img src="image/pic1.png" />
</div>
<div class="div2">
  <img src="image/pic2.png" />
</div>

css代码

.div1{
  padding: 10px;
  border: 3px solid black;
}
.div2 {
  border: 3px solid red;
}
.div2 img{
  float: left;
  padding:10px;
}

将float属性设置给div2内部的img元素,可以看出div2的高度并没有img元素被撑起来,因此又叫高度崩塌。

原因:将img元素设置为浮动元素,所以脱离文档流。因此div2中认为没有元素,所以产生了高度崩塌。具体怎么解决高度崩塌,后面再介绍。

三、clear属性

clear属性的作用是清除浮动。

 clear : none | left | right | both;

 none  :  默认值。允许两边都可以有浮动对象

 left   :  不允许左边有浮动对象

 right  :  不允许右边有浮动对象

 both  :  不允许有浮动对象

CSS float相关介绍入门基础知识_float指南教程

html代码

<div class="bg1"></div>
<div class="bg2"></div>

css代码

.bg1{
  width:200px;
  height: 200px;
  border: 3px solid black;
  background: url(image/pic2.png);
  float: left;
}
.bg2{
  width:500px;
  height: 300px;
  border: 3px solid red;
  background: url(image/pic1.png);
}

如上图所示,由于bg1是浮动元素,所以bg2在bg1底层铺展。

如果想要让bg2换行排列,居于bg1底端下方(如下图),这个时候就要用到clear属性了。

CSS float相关介绍入门基础知识_float指南教程

css代码中,只需要在bg2中加入 clear:left 即可

.bg1{
  width:200px;
  height: 200px;
  border: 3px solid black;
  background: url(image/pic2.png);
  float: left;
}
.bg2{
  width:500px;
  height: 300px;
  border: 3px solid red;
  background: url(image/pic1.png);
  clear: left;
}

对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

CSS float相关介绍入门基础知识_float指南教程

以上图例子说明。bg1和bg2都设置了float:left。如果在bg1样式中添加样式clear:right,来迫使bg2下移,则没有任何效果。因为这个清除浮动是在bg1中调用的,她只能影响bg1,不能影响到bg2。

要想要bg2下移,就必须在bg2的样式中使用浮动 clear:left。用来指定bg2元素左边不允许出现浮动元素。

四、BFC

1.BFC的介绍

定义:

一些元素,如float元素,如position为absolute,block为inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素,它们将会建立一个新的块级格式化上下文(Block Formatting Context),也就是我们所说的BFC。

形成

BFC也是HTML中的一个盒子(看不见而已),只有满足至少下列条件之一才能形成BFC:

① float属性不为none.

② position属性不为static和relative.

③ display属性为下列之一:table-cell,table-caption,inline-block, flex,inline-flex.

④ overflow属性不为visible.

布局规则

① 内部的Box会在垂直方向,一个接一个地放置。

② Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

③ BFC的区域不会与float box重叠。

④ BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

⑤ 计算BFC的高度时,浮动元素也参与计算。

2、BFC的作用

(1)容纳浮动元素

就是解决上面遇到的高度崩塌问题。

CSS float相关介绍入门基础知识_float指南教程

只需要将div2的css代码改动一下,增加一个BFC来容纳浮动元素。

.div1{
  padding: 10px;
  border: 3px solid black;
}
.div2 {
  overflow:hidden;
  border: 3px solid red;
}
.div2 img{
  float: left;
  padding:10px;
}

除此之外,解决高度崩塌问题,还有如下解决方法:

增加一个清除浮动的子元素

html代码

<div class="div1">
  <img src="image/pic1.png" />
</div>
<div class="div2">
  <img src="image/pic2.png" />
  <div style="clear:both"></div>
</div>

(2)阻止文本换行

大多数情况(若没有特殊设置),如Figure1,文本将会环绕浮动元素,但有时候这并不是我们期望的。我们期待的是Figure2如图:

CSS float相关介绍入门基础知识_float指南教程

想达到图二的效果,只需要将右边文字区域变成一个BFC即可。

CSS float相关介绍入门基础知识_float指南教程

css代码如下:

.float{
  float:left;
  width:100px;
  height: auto;
  margin: 10px;
}
.around{
  width:300px;
  color:#fff;
  background: #009F95;
  padding: 10px;
  overflow: hidden;
}

(3)消除Margin Collapse (外边距坍塌)

在正常情况下,在一个容器内的所有box将会由上至下依次垂直排列,即我们所说的一个元素占一行,并切垂直相邻的距离(即margin)是由各自的margin决定的,而不是两个margin的叠加。

让我们看一个例子:

CSS float相关介绍入门基础知识_float指南教程

HTML代码:

<div class="container">
  <p>list 1</p>
  <p>list 2</p>
  <p>list 3</p>
</div>

css代码:

.container {
  width: 300px;
  background-color: black;
  overflow: hidden;
}
p {
  background-color: white;
  margin: 20px 0;
  text-align: center;
}

理想情况下,我们会认为p标签之间的margin应该是它们的和(20px*2=40px),但实际上却是20px.这其实是collapsing margins(外边距坍塌)。其中flex布局不存在collapsing margins,水平方向上也不存在collapsing margins。

利用BFC能消除collapsing margins。紧记只有当元素在同一个BFC中时,垂直方向上的margin才会clollpase。如果它们属于不同的BFC,则不会有margin collapse。因此我们可以再建立一个BFC去阻止margin collpase的发生。

所以为了让他们的margins变成40px,我们只需要用div,建立一个BFC,令p元素处于不同BFC即可。

CSS float相关介绍入门基础知识_float指南教程

html代码:

<div class="container">
  <p>list 1</p>
  <p>list 2</p>
  <div class="newBFC">
	<p>list 3</p>
  </div>
</div>

css代码:

.container {
  width: 300px;
  background-color: black;
  overflow: hidden;
}
p {
  background-color: white;
  margin: 20px 0;
  text-align: center;
}
.newBFC {
  overflow: hidden;
}
海计划公众号
(0)
上一篇 2020/03/23 18:37
下一篇 2020/03/23 18:37

您可能感兴趣的内容

  • Vue 关于单向数据流的简单理解入门基础知识_数据基础知识

    单向绑定和双向绑定单双向绑定,指的是 view层和 model 层之间的映射关系。Vue 在数据操作上支持单向绑定和双向绑定:单向绑定:例如 Mustache 插值语法, v-bind 等;双向绑定:即表单的 v-model 。它实际上是一个语法糖,背后包括两步操作:v-bind:value,v-on:input单向数据流数据流,指的是组件之间的数据流动虽然

    2020/03/24
  • CSS Reset浏览器样式重置菜鸟知识_Reset小白攻略

    1. CSS Reset为什么存在?只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的“理解”效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一

    2020/03/22
  • TypeScript接口小白指南_接口基础入门

    接口的作用是声明变量的结构和方法,但不做具体的实现。通常,接口会强制对所有成员进行类型检查,包括数量和类型:interface Name {first: string;second: string;
    }let name: Name;
    name = {first: ‘John’,second: ‘Doe’
    };name = {// Error: ‘second

    2020/03/26
  • 如何在前端中使用protobuf?入门基础教程_前端小白常识

    前言由于目前公司采用了ProtoBuf做前后端数据交互,进公司以来一直用的是公司大神写好的基础库,完全不了解底层是如何解析的,一旦报错只能求人,作为一只还算有钻研精神的猿,应该去了解一下底层的实现,在这里记录一下学习过程。Protobuf简单介绍Google Protocol Buffer(简称 Protobuf)是一种轻便高效的结构化数据存储格式,平台无关

    2020/03/23
  • gbk是什么意思?菜鸟教程网_码小白基础

    GBK全称《汉字内码扩展规范》,是对GB2312编码的扩展,因此完全兼容GB2312-80标准。GBK共收录21886个汉字和图形符号,其中汉字(包括部首和构件)21003个,图形符号883个。GBK由中华人民共和国全国信息技术标准化技术委员会1995年12月1日制订,国家技术监督局标准化司和电子工业部科技与质量监督司1995年12月15日联合以《技术标函[

    2020/03/20
  • 需要避免的五个防火墙配置错误小白知识_攻击小白攻略

    防火墙配置错误可能与没有防火墙一样危险。人们需要了解五个常见的防火墙配置错误,这些错误将让任何组织都容易受到攻击。防火墙是抵御所有类型网络入侵者的主要防线,但即使具有多年的实践和丰富的经验,许多组织仍然会犯配置错误,使其网络容易受到数据窃取、丢失以及其他类型的破坏。以下是组织应该不惜一切代价需要避免的五种防火墙错误配置:1.未能正确配置和协调防火墙,并使用越

    2020/03/24
  • JS设置CSS样式的几种方式攻略教程_样式小白攻略

    用JS来动态设置CSS样式,常见的有以下几种1. 直接设置style的属性 某些情况用这个设置 !important值无效如果属性有’-‘号,就写成驼峰的形式(如textAlign) 如果想保留 – 号,就中括号的形式 element.style[‘text-align’] = ‘100px’;element.style.height = ‘100px

    2020/03/20
  • 网站设计如何才能更符合企业需求基础教程_需求入门基础教程

    如果想要建立企业的网站,但还没有决定选择哪个平台?为小型企业需求选择合适的网站设计平台并非易事,而且尤其是如此多的建站平台就更难抉择了,企业创建网站的初衷是吸引世界各地数百万的关注和打响企业品牌,并且以此获得更多客户和订单,所以企业可以从这些要求中找到合适的网站设计平台,那么网站设计如何才能更符合企业需求?1、网页设计 网页设计对小型企业网站非常重要,

    2020/03/23
  • 使用typescript构建Vue应用新手入门_应用教程视频

    一、Vue项目初始化-引入typescript使用typescript构建Vue应用和使用js一样,都是通过vue-cli去初始化并创建一个vue项目,只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项。 二、typescript Vue项目比较使用typescript构建的Vue项目发生了一些变化:① main

    2020/03/26
  • Han基础教程_「汉字标准格式」印刷品般的汉字排版框架

    Han基础教程 官方网址:https://hanzi.pro/ GitHub:https://github.com/ethantw/Han 简介描述:「汉字标准格式」印刷品般的汉字…

    2020/03/06
  • Loom入门基础教程_基于浏览器在线屏幕录制工具

    Loom入门基础教程 官方网址:https://www.useloom.com/ 简介描述:基于浏览器在线屏幕录制工具 “Loom”是一个支持通过浏览器来录制屏幕录像的工具,用户无…

    2020/03/11
  • 机器学习建模的几点思考与总结小白知识_机器菜鸟指南

    机器学习现在在很多地方都是十分流行,无论现在的你是否从事建模工作,还是你将来想从事相关工作,对于从业者可以从中看出一些同感与意见,对于未来从业者可以了解这个职业到底是做些什么。话不多说,一个机器学习模型的开发周期一般可以分为:1、业务需求挖掘(Business insight)2、数据搜集处理(Data Curation)3、模型训练开发(Modeling)

    2020/03/24
  • MVVM 原理重难点小白入门_mvvm入门基础知识

    今天花上 10 分钟,针对 MVVM 这个面试必考点,简简单单的来给大家划一下重难点划重点MVVM 双向数据绑定 在Angular1.x版本的时候通过的是 脏值检测 来处理而现在无论是React还是Vue还是最新的Angular,其实实现方式都更相近了那就是通过 数据劫持+发布订阅模式真正实现其实靠的也是ES5中提供的 Object.defineProper

    2020/03/23
  • vue实现一个全局Message组件小白知识_组件菜鸟教程网

    不知道大家在用一些UI框架,比如Element-ui的时候,有没有觉得一些全局组件。this.$message(),this.Toast()等,用起来很爽。他们不像其他的组件,需要去导入,去注册。麻烦的很。看了Element的源码,自己也撸了一个。其中包括了以前没有接触过的插件知识,哎,感觉自己对Vue的理解还是不够,只停留在了使用的这阶段。需要更多的往深层

    2020/03/29
  • 响应式网站的内容设计菜鸟教程下载_响应式菜鸟攻略

    基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容。 1 响应式图片显示内容设计真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片,我们可以准备多张不同尺寸的图片,然后在各自的媒体查询样式中使用对应的图片背景。再结合min-wi

    2020/03/24
  • robots.txt 和 sitemap菜鸟指南_Sitemap基础入门

    为了爬虫, 在网站根目录创建robots.txt文件(utf-8),文件内容涉及四类键值对:User-agent,Disallow,Allow,Sitemap,支持正则, Disallow后没内容就是允许所有User-agent: *
    Disallow:
    Disallow: /cgi-bin/
    Disallow: /admin/
    Sitemap: https

    2020/03/22