css之清除浮动

浮动了解

什么是浮动？

使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

文档流：文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

 

浮动用来做什么？

浮动float最开始出现的意义是为了让文字环绕图片，后来浮动在网页的布局中应用比较广泛，让块级元素并排显示。

 

什么时候清除浮动？

并不是所有的浮动都需要清除，影响布局才需要清除。

清除浮动主要是为了解决：父元素因为子元素浮动引起的内部高度为0的问题。

清除浮动本质叫做闭合浮动。就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

1.这个例子后面可能继续往这个招聘模块加职位，所以没有给父盒子添加高度，子盒子默认撑开父盒子

 2.给子盒子添加浮动后

 

清除浮动的方法：

可以分为两大类：

1.使用clear属性。

2.通过触发BFC来实现。

 清除了浮动，会自动检测孩子高度，以最高的为准

1.使用clear属性：both|left|right

结尾空元素或者after等伪元素或者其他标签br ，利用 CSS 提供的 clear:both 清除浮动，让父级 div 能自动获取高度。

1. 额外标签法：在最后一个浮动的子元素后面额外添加一个空白标签（必须是块级元素独占一行），给其设置clear：both ；（不推荐使用）

clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化比较差。

 

 

 

 

2. after伪元素法：使用after伪元素和zoom清除浮动；额外标签法的升级版，好处是不用单独加标签了。（较常用，给父盒子添加类clearfix）
优点：符合闭合浮动思想，结构语义化正确
缺点：IE6/IE7不识别:after伪元素，存在兼容性问题，使用zoom：1，触发hasLayout。

 

3. 双伪元素法：使用before和after双伪元素清除浮动（较常用，给父盒子添加clearfix）

 

 display:table; /* 这句话可以触发BFC BFC可以清除浮动 */

 

 2.通过触发BFC来实现：

1. 父元素添加overflow：hidden、auto、scroll

可以通过触发BFC的方式，实现清除浮动效果。
优点：代码简洁（慎重使用，若该父盒子里还有position定位会引起麻烦）
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

 

还有其他触发BFC方式，只要满足下述4个CSS条件之一就行

BFC触发条件：

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。
2、position的值不是static或者relative。（absolute，fixed）
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible（hidden，auto，scroll ）

 

在父盒子中添加类似 overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table 的规则来显示创建BFC。但会有一些副作用：

1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素

什么是BFC

 块级格式化上下文 (Block Fromatting Context)BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且不会在布局上影响外面的元素。

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。