<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
<div class="clear"></div>
</div>
<div class="block-parent bfc-root">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
9 回答
最简单的是将
overflow:hidden
放在父div上并且不指定高度:另一种方法是浮动父div:
另一种方式使用清晰元素:
CSS
原因
问题是浮动元素是out-of-flow:
因此,它们不会像in-flow元素那样影响周围的元素 .
这在9.5 Floats中解释:
这也在10.6 Calculating heights and margins中指定 . 对于"normal" blocks,
Hacky解决方案:清除
解决问题的一种方法是强制将一些流入元素放置在所有浮点下面 . 然后,父级的高度将增长以包裹该元素(因此浮动也是如此) .
这可以使用the clear property来实现:
因此,解决方案是添加一个空元素,其中
clear: both
作为浮点数的最后一个兄弟但是,这不是语义上的 . 因此,最好在父节点的末尾生成pseudo-element:
这种方法有多种变体,例如使用不推荐的单冒号语法
:after
来支持旧浏览器,或使用其他block-level显示,如display: table
.解决方案:BFC根源
开头定义的问题行为有一个例外:如果块元素 Build Block Formatting Context(是BFC根),那么它也会包装其浮动内容 .
根据10.6.7 'Auto' heights for block formatting context roots,
另外,正如9.5 Floats所解释的那样,由于以下原因,BFC根也很有用:
块格式化上下文由 . Build
visible
hidden
inline-block
,table-cell
或table-caption
时 .left
或right
时 .absolute
或fixed
时 .请注意,这些可能会产生不希望的附带效果,例如剪切溢出的内容,使用shrink-to-fit算法计算自动宽度或变得不流动 . 所以问题在于,不可能有一个具有可见溢出的流内块级元素来 Build BFC .
Display L3解决了这些问题:
可悲的是,目前还没有浏览器支持 . 最终我们可以使用
把你的浮动
div(s)
放在div
中并在CSS中给它overflow:hidden;
它会工作正常 .
没有什么遗漏 . Float是为您希望图像(例如)放在几段文本旁边的情况而设计的,因此文本会围绕图像流动 . 如果文本“拉伸”容器,那就不会发生 . 你的第一段将结束,然后你的下一段将在图像下开始(可能是几百个下面的像素) .
这就是为什么你得到的结果 .
W3Schools推荐:
将
overflow: auto
放在父元素上,它将"color"整个背景,包括元素边距 . 浮动元素也将留在边界内 .http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix
在某些情况下,即 when (if) 你只是使用
float
让元素在同一个"line"上流动,你可能会使用代替
否则,在最后使用
clear
元素工作,即使它可能违背谷物需要一个元素来做应该是CSS的工作 .谢谢 LSerni 你为我解决了 .
为达到这个 :
你必须这样做:
这是更现代的方法:
没有更多明确的修正 .
附:使用溢出:隐藏;隐藏盒子阴影所以......
正如Lucas所说,你所描述的是float属性的预期行为 . 令许多人感到困惑的是,为了弥补CSS布局模型中的缺点,浮动已经远远超出其原始预期用途 .
如果您希望更好地了解此属性的工作原理,请查看Floatutorial .