乐趣区

关于css:CSS清除浮动的关键clearboth

jiezi

置信大家曾经晓得为什么须要浮动以及为什么须要革除浮动。上面次要聊聊革除浮动的原理，要害是说分明 clear:both 的作用。

一、革除浮动的要害
我集体比拟喜爱双伪元素的写法，次要是好记：

.clearfix:before,
.clearfix:after {
    content:””;
    display: table;
}

.clearfix:after {clear: both;}

.clearfix {*zoom: 1;}

其实不论是双伪元素还是单伪元素，都是实际中罕用的做法。所谓 W3C 的举荐做法反而并不常见，但其原理和伪元素做法是一样的。首先在 html 中浮动元素前面加一个兄弟元素：

<div class="wrapper">
    <div class="float"></div>
    <div class="clear"></div>
</div>

而后对 clear 设置 clear:both：

.wrapper {
    width: 500px;
    background-color: purple;
}

.son {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
}

.clear {
    clear: both;
    background-color: pink;
}

没有什么花里胡哨，革除浮动就是一行 clear:both 搞定。

二、clear:both 的了解
如果你只看了 w3school 的简略阐明，可能还是不明确 clear 的意义。

定义和用法
clear 属性规定元素的哪一侧不容许其余浮动元素。

阐明
clear 属性定义了元素的哪边上不容许呈现浮动元素。在 CSS1 和 CSS2 中，这是通过主动为革除元素（即设置了 clear 属性的元素）减少上外边距实现的。在 CSS2.1 中，会在元素上外边距之上减少革除空间，而外边距自身并不扭转。不管哪一种扭转，最终后果都一样，如果申明为右边或左边革除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

MDN 的介绍是：

clear CSS 属性指定一个元素是否必须挪动 (革除浮动后) 到在它之前的浮动元素上面。clear 属性实用于浮动和非浮动元素。

emmmm… 挪动到上面，这个比拟好了解了。原本是不会挪动到上面的，看 MDN 的 demo 截图：

浮动原本是了解决图片和文字围绕问题的，失常状况下文字绕着“图片”（left 和 right）走就是了，文字所在的 div 还是依旧忽视浮动的 left 和 right 两个 div，谁叫你俩脱标了呢。
然而，对文字 div 应用了 clear:left 之后，文字 div 右边不容许有浮动元素。怎么个不容许？自个儿挪中央，挪动到 div.left 上面去。文字 div 左边还是容许有浮动元素的，所以不用挪动到 div.right 上面。

这个挪中央怎么了解呢？它是文字所在的 div 整个挪上来，不是文字扭转盘绕形式。
不革除浮动（clear:none）是这样的：（文字所在 div 用红色框示意）

革除右边浮动（clear:left）是这样的：（文字所在 div 用红色框示意）

因而，某个元素设置 clear 革除浮动，就是本身向下挪动，不和浮动的元素产生重叠。在挪动的过程中，clear 元素就把父元素高度撑开了。毕竟本身是规范流，父元素能够漠视浮动的孝子，但必须蕴含规范流好孩子。

另外，咱们其实不想看到 clear 元素，也不心愿它影响其余元素的观感。所以，伪元素代码做法中又搭配了其余的 content:””、height:0 等属性来暗藏它，最终出现进去 clear 元素就是一个有 width 无 height 的工具人。

退出移动版