置信大家曾经晓得为什么须要浮动以及为什么须要革除浮动。上面次要聊聊革除浮动的原理，要害是说分明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的工具人。