拉勾前段学习笔记：CSS常用样式——浮动和清除浮动

CSS常用样式——浮动属性

浮动是我们学习的第1种脱离标准流的属性。

浮动是一种非常重要的布局属性

属性名：float

属性值：left左浮动；right右浮动

作用：让元素脱离标准流，同一级的浮动元素可以并排在一排显示

一、 浮动的定义

   .box{

​      width: 1000px;

​      height: 100px;

​      border: 1px solid #800;

​    }

​    .box p{

​      float: left;

​      width: 100px;

​      height: 100px;

​      margin-right: 10px;

​      background-color: yellow;

​    }

浮动就是让元素从原来的标准流从上往下加载的方式变成在已知的box中漂浮起来，从左往右或从右往左有顺序的在box容纳范围内显示。

浮动的元素最重要的意义就是脱离了标准流，标准文档流特点区分行块，

块级元素：可以设置宽高，必须独占一行

行内元素：不能设置宽高，可以并排一行

浮动元素最大好处就是不但可以设置宽高可以并排一行，而且最重要是不会有空白折叠现象。

二、浮动属性的性质

浮动元素的依次贴边：

父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边

付元素左边-子元素1-子元素2-子元素3-子元素4

同时要注意，贴边的时候宽度和高度引发的各种贴向下一行的问题

但是不会贴向爷爷级，只是有向父元素边缘进行贴边的趋势。如果太宽可以以溢出方式解决问题

浮动的应用：

• 平均分布表格效果
• 导航栏效果
• 电商或者企业网站布局

浮动没有margin塌陷现象

浮动脱离标准流之后的另外一个性质是不再具有Margin塌陷现象。

浮动的元素会让出标准流的位置

加载了浮动属性的元素可以让出原本的标准这个位置，浮动在下一个元素之上。

字围现象

将字元素围在浮动元素中

三、浮动的问题

标准流在元素不设置高度的情况下，能被内部标准流元素自动撑高，如果内部子元素进行了浮动，则浮动的子元素是称撑不高标准流父亲的。（破坏了一个标准流的优势）

如何清除浮动带来的影响

清除浮动一：给标准流的父元素强制一个合适的高度，治标不治本，具有局限性

清除浮动方法二：clear属性

作用；：清除标签元素自身受到的前面的浮动元素的影响

属性值：

• left：清除前面左浮动带来的影响。
• right：清除前面右浮动带来的影响。
• both：清除前面所有浮动带来的影响

clear属性解决了元素影响后面元素标准流位置和贴边问题，但同时有着付元素高度不能自适应，两个父元素如果有margin效果不正确等问题

清除浮动方法三：隔墙法

外墙法：在两个大的父盒子之间，添加一个空的

标签，标签上带有clear：both属性

内墙法：在父元素的内部所有浮动子元素后面添加一个空的Div标签，标签高度设为零，添加clear属性，相当于把墙砌在了元素内部。

内墙法生效的原因：在第1个盒子里，前几个元素都是浮动的元素。在这些浮动的元素后面添加了一个div，这个div清除了浮动，所以不会占有前面浮动让出来的标准流位置，而且高度是0，他作为一个标准流，子元素是可以撑高父亲的。

内墙法可以解决所有问题，但是通过HTML来解决CSS未免有些本末倒置，而且如果有太多标签创建太多div有点冗余。

因此，有更好清除浮动的方法：伪类

本质是使用使用伪类方法利用css代码书写一堵内墙

伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。（父元素的最后一个子元素位置）

：after伪类选择器）

约定俗成的类名：一般给需要清楚浮动的父盒子设置一个clearfix的类名

除此之外，还有清除浮动的一个小偏方：溢出隐藏

给内部有浮动子元素的父元素添加溢出隐藏overflow：hidden；属性可以解决浮动的所有问题

overflow：hideen效果是将超过高度的部分直接隐藏、

总结

常用的解决浮动元素的问题的常用方法有：设置高度height，设置伪类，设置内墙法还有overflow：hidden。如果父亲元素是固定，建议用height解决，如果高度自适应，建议用overflow