CSS浮动笔记

一、流式布局

1.

标准流

2.浮动的元素会不占据标准流的空间。但是会影响标准流中的文本的排版。

二、浮动

1.浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

2.浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容塌陷。

浮动的子元素会造成父元素的高度塌陷.

3.第一种解决高度塌陷的方法就是使用overflow。

在父盒子上设置overflow： hidden；之后，父盒子具有的包裹性，就不会出现高度塌陷的问题了。

4.Overflow可以触发元素的BFC，可以让元素具有独立的排版的空间和权限，在bfc内部所有的元素都依据父元素进行排版和布局，所有父元素具有了包裹性，这就是解决高度塌陷问题的原理。

比如：浮动也可以触发bfc，再有：定位、overflow、display：table、table-cell...

5.

6.方法一：使用空标记清除浮动，隔墙放。增加标签。

方法二：使用overflow属性清除浮动。会误伤。

方法三：使用after伪对象清除浮动。

方法四：使用before after伪对象清除浮动.

7.Clearfix的使用场景：

-父盒子要把所有的子盒子包裹住。

-父盒子是包裹正行的div元素，需要前后进行清除浮动。

运用before after来设置content为空,并且display:block或table.

clearfix设置为触发BFC.