什么是浮动？有哪些清除浮动的方法？

1.背景介绍

什么是float

 浮动最开始出现的本意是用来让文字环绕图片
但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在， 在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素才会停下来。

float属性值：left、right、none

2.知识剖析

浮动的特性

 包裹性

首先包裹性很好理解，一个block元素不指定width的话，默认是100%，一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。

破坏性
这里破坏性是指元素浮动后可能导致父元素高度塌陷。
浮动破坏性原理： 因为浮动元素被从文档正常流中移除了，父元素当然还处在正常流中，所以父元素不能被浮动元素撑大。 高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
常见的清除浮动的方法、
（1）、clear属性
left:元素左侧不允许有浮动元素
right:元素右侧不允许有浮动元素
both:元素左右两侧均不允许有浮动元素

none:默认值，允许浮动元素出现在两侧

（2）、给浮动元素父级设置高度
高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了.
缺点：在浮动元素高度不确定的时候不适用
（3）以浮制浮（父级同时浮动）

缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。

计算BFC的高度时，浮动元素也参与计算


float属性不为none


position为absolute或fixed


display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

（4）br 清浮动

br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。

（5）使用AFTER伪元素

通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

3.常见问题

使用after伪元素清除浮动不生效？

4.解决方案
clear只对block元素起作用

需要对产生高度塌陷的元素使用after，而不是浮动的元素本身

< p >

< img src= "./14955113396875593.jpg" class= "first" >

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

</ p >

< div >

< img src= "./picture/131235.jpg" >

</ div >

< div class= "float" >

< img src= "./picture/keaitxkeai_351.jpg" >

</ div >

< div class= "third" >

< img src= "./picture/13135.jpg" class= "float-left" >

< div ></ div >

</ div >

div {

border: 4px solid orchid;

}

.first {

float: left;

}

.float {

float: right;

}

.float-left {

float: left;

}

.float-left::after {

content: "";

clear: both;

}

.third::after {

content: "";

clear: both;

display: block;

}

6.扩展思考

问题: 大家还知道哪些清除浮动的方法？

7.参考文献

http://zh.learnlayout.com/clearfix.html


1.清除浮动（clearfix hack）


http://lightcss.com/all-about-clear-float/

2.清理浮动的那些事儿——6种清理浮动的方法

8.更多讨论

1.直接在父元素添加clear:both行嘛？
 不可以- -因为是子元素浮动，导致的父元素的塌陷问题，所以只有浮动元素的同级元素使用clear属性才能清除浮动。

2.如果不清除浮动会怎样，每种清除浮动的方法有什么优劣

不清楚浮动的话。会导致父级元素的高度塌陷问题。

使用空div盒子的话会有css语义化的问题。而且如果之后采用其他布局后，需要到html内一个个对空盒子进行删除。

3.还有什么方式触发bfc？

float属性不为none


position为absolute或fixed


display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible