Question

CSS浮动和清除浮动？

为什么黄色块添加了clear:right 右边的橘色浮动还在呀，不应该会往下吗？





Answer 1

清除浮动并不是指清除浮动元素本身的浮动，而是在浮动元素的外面（前面或后面）进行清除，也就是清除浮动元素对其他后续元素的影响。浮动元素相当于漂浮在空中，那么它原来在地面所占用的位置就被收回了，后面的其他元素就会自动占用这个位置（具体表现就类似于其他元素钻到这个浮动元素的下面去了），而清除浮动的意思就是把浮动元素原来在地面的占用位置找回来，这样后面的其他元素的位置就不会受这个浮动元素的影响了。

具体做法可以在浮动元素的后面插入一个块级元素来清除浮动，下面是最简单的一种：

<div class="d1"></div>

<div class="d2"></div>

<br style="clear:both"/>

<div class="d3"></div>

Answer 2

设置好每一块的浮动位置啊，最好用上display：block

Answer 3

在代码中放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护
<div id="d1"></div>
<div id="d2"></div>
<div class="clear"></div>
<div id="d3"></div>
清除浮动好像不能靠着本身去清除，要另外给个元素标签作为占位，或者借助：after、before等伪元素来达到清除浮动的效果
#d2:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}