浮动元素有什么特征？对父容器其他浮动元素普通元素文字分别有什么影响？清除浮动指什么？如何清除浮动？

Posted 2020-12-14 qinglaoshi

1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？

特征

• 任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义display：block；声明。这样就可以为浮动元素定义width和height属性，即使是内联显示元素也可以。
• 当我们没有指定浮动元素宽度时，浮动元素会自动收缩到能够包含内容的宽度。而块状元素（或者被定义display：block；）显示时，如果没有定义，它的宽度则会自动显示为100%。
• 浮动模型不会与流动模型发生冲突，当元素定义为浮动布局时，它在垂直方向上应该还处于文档流中，也就是说浮动元素不会脱离正常文档流而任意浮动，它的上边线将会与未被声明为浮动时的位置一样，但是在水平方向上，它的浮动边会尽可能的靠近它的包含元素边缘。
• 与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系。
• 浮动元素后面的块状元素和内联元素都能够以流的形式环绕浮动元素左右。甚至于上面文本流连成一体。
• 当两个或两个以上的相邻元素都被定义为浮动显示时，如果存在足够的空间容纳它们，浮动元素之间可以并列显示，它们的上边线是在同一水平线上。如果没有足够空间那么后面的浮动元素将会下移到能够容纳它的地方这个向下移动的元素有可能产生一个单独的浮动。

对父容器的影响

浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。

对其他浮动元素的影响

当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，当空间不够的时候会被浮动元素卡住。

对普通元素的影响

普通元素无法感知到浮动元素，占据浮动元素所在的位置，但是普通元素处于浮动元素的下层。

对文字的影响

浮动元素旁边的文字框被缩短，从而给浮动元素留出空间，文字框围绕浮动元素。

2. 清除浮动指什么？如何清除浮动？

是什么

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

---

清除浮动方法

方法一： 使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

---

方法二： 使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

---

方法三： 给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

---

方法四： 使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

---

方法五：使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

<div class="container clearfix">
    <div class="wrap">aaa</div>
</div>
.clearfix:after{
    content:"";                /*设置内容为空*/
    height:0;                /*高度为0*/
    line-height:0;            /*行高为0*/
    display:block;            /*将文本转为块级元素*/
    visibility:hidden;        /*将元素隐藏*/
    clear:both;                /*清除浮动*/
}
.clearfix{
    zoom:1;                    /*为了兼容IE*/
}