CSS浮动

浮动：实现传统页面布局的一种方式

特性：

• 浮动元素只会父影响元素和后面的元素
• 加浮动的元素会脱离文档流，不占空间
• 浮动元素会沿着父元素靠左或右排列
• 浮动元素之间会在父元素里横向排列,排列不下时会换行排列
• 如果子元素浮动而父元素没有设置高度，会造成高度坍塌
• 浮动元素没有块级和行级之分，浮动元素的display皆为inline-block
• 浮动元素脱离文档流不脱离文本流，所以文本流能识别浮动元素的位置，可实现图文混排效果（绝对定位和固定定位脱离文本流）
• 给浮动元素设置display无效
• 浮动元素的终止条件：前面有浮动或者非浮动元素，或者触碰到了父元素的边界

 

为什么？

浮动为什么只影响后面的元素？

因为浏览认为浮动元素不存在，不占标准流的位置，所以后面的元素直接在原来浮动元素的空间位置上进行布局

CSS浮动流与标准流的区别？

标准流有水平排版和垂直排版两种方式，浮动流只有水平排版。原因是浮动的元素都变成inline-block

浮动元素在哪停止？

1 当碰到父级元素的边界 2 当碰到前面任意元素

为什么要清除浮动？

因为浮动元素对父元素造成了影响，如高度塌陷、文字环绕之类的。

 

清除浮动的效果：

1 给父元素固定高度：

• 不推荐，影响自适应效果，而且依然会影响其后面的元素

2 父元素浮动：

• 不推荐，浮动之后的父元素自身也会对其父元素和后面的元素造成影响

3 开启BFC,重新定义容器高度计算的方式：

• 不推荐，BFC的作用不仅仅是清浮动，可以以解决margin collapse问题（两个不同BFC不会造成margin collapse），但这并不是初衷（margin collapse源于CSS设计者希望开发者们在遇到给两个上下排列的元素添加间隙的需求时，只需要给其中一个设置margin就好）

4 clear属性清除浮动：

1空标签:不推荐。即在浮动元素后面添加空标签并设置clear：left/right/both。会多添加一个标签，代码冗余

2 伪类：推荐。代码如下。（注意：clear属性添加在块级元素才起作用，而content内容是内联元素，因此必须设置display:block）

#father::after {
        content: '';
        display: block;
        visibility: hidden;
        clear: both;
}

 注意

如上图，after伪元素只是在父元素内部的最后添加了content并设置属性,说明还是在元素内部而非在外部，所以不能清除浮动元素对后面元素的布局影响

如果要清楚对后面元素的影响，则在后面元素上设置clear属性，如下图，div3仍然受到影响