Css清除浮动常用方法

约定不等于承诺〃 2022-01-09 15:05 286阅读 0赞

#### 1、为什么要浮动 ####

首先我们要知道为什么要给元素设置浮动。HTML中标签分为：块级标签，行内标签，行内块标签。其中块级标签和行内块标签以及行内标签的排列方式是不一样的，块级标签是独占一行的，而行内块元素和行内元素是在同一行内排列的，只有当排满或者容不下元素时才会另起一行显示。因此想要块级元素在同一行内显示，或者想要设置元素浮动对齐的方式就需要将元素浮动起来。**css中float属性用来设置元素的浮动，属性值有left和right，分别代表左浮动和右浮动，浮动只能在当前的父元素中浮动，并且浮动的元素不能超过上一个兄弟元素**。  
块级元素未浮动时排列方式，box和con都是块级元素，在没有浮动的情况下是独占一行显示的。  
![块级元素未浮动时排列方式][20190621192239230.png]  
以下是布局代码：

块级元素浮动后的排列方式，box和con都设置了css样式float：left；浮动后的显示效果，块级元素可以在同一行内显示。  
![块级元素浮动后的排列方式][20190621193000850.png]  
以下是布局代码：

#### 2、为什么要清除浮动 ####

浮动是一种常见的布局，但是浮动如果没有清除的话可能会带来很多的问题，最常见的浮动问题就是父级塌陷，而父级塌陷的原因则是因为父级内的元素在浮动之后会脱离文档流，文档流又称为普通流，是文档中可实现元素在排列时所占用的位置。浮动的元素，并不属于文档中的普通流，元素漂浮于普通流之上，能够左右浮动，也就是因为浮动的这种特性，导致属于普通流的元素在设置浮动后，在父级没有设置高度的情况下（在实际开发中，一般不会给元素的父级设置宽高），父级的高度就会是0，这就是我们所说的父级高度塌陷。  
以下图片结合上面两张图可以看出，在父级outer元素没有清除浮动且没有设置高度的情况下，父级的高度为0，粉色区域消失。  
![没有清除浮动的情况下][2019062119405353.png]

\*\*补充： 浮动对行内元素的影响，\*\*拥有float属性的元素可以设置width和height，并支持margin-top/margin-bottom 和padding-top/padding-bottom属性。\*\*浮动对块级元素的影响，\*\*可以在同一行内显示。

#### 3、清除浮动的常用方法 ####

（1）伪元素清除浮动（推荐使用）  
伪元素清除浮动的原理则是给当前浮动的元素父级添加after伪元素，为after伪元素设置清除浮动的功能代码。

.box{
                /* 下面代码中的*是css hack */
                *zoom:1;/*开启了haslayout  相当于开启了BFC，为了兼容IE浏览器*/
            }
            .box:after{
                content: "\200B"; 
                display: block;
                height: 0;
                clear: both;
            }

（2）overflow清除浮动  
\*\*overflow：hidden；\*\*是元素超出隐藏的意思，但是在不需要隐藏超出元素的情况下可以使用该属性清除浮动，实际原理是开启了 BFC（块级格式化上下文）， BFC是一个独立的渲染区域，它规定了内部的元素如何布局，并且与该区域外的元素没有任何的影响，当元素开启的BFC以后，父元素可以包含浮动的子元素。  
（3）空块级标签清除浮动  
空块级标签清除浮动的原理则是在浮动元素的末尾添加一个空的块级标签，设置css属性为clear：both;当页面浮动元素较多时不建议使用该方法清除浮动，因为需要添加多个空块级标签，增加浏览器运行的负担，页面代码也重复较多，不利于开发人员开发和维护。

（4）  
标签清除浮动  
  
标签清除浮动的原理则是在浮动元素的后面添加一个  
，clear=“all”是  
标签自身拥有的属性，原理和空块级标签清除浮动类似，但是几乎不用。

（5）给父级设置宽高（不推荐使用）  
虽然给父级设置高度可以避免浮动带来的父级塌陷问题， 但是并不推荐使用，设置高度的方式比较局限，而且在实际开发中我们是很少会给父级设置高度的，因为父级的高度可以由子元素撑开，这样减少了代码的重复，同时不需要计算父级的高度，利于开发。

[20190621192239230.png]: /images/20220109/fd6519231901453fac058aa4ac139671.png
[20190621193000850.png]: /images/20220109/1d8c11c873244866a0fe92b8ac1e5a7c.png
[2019062119405353.png]: /images/20220109/bab490063938466ab53884c04cee90df.png