HTML 左右布局原理请教

Question

<div style="float:left;width:200px;margin-right:20px;">左右
</div>
<div style="overflow:hidden">右侧</div>

请问这个原理是什么？能具体剖析下吗？

Answer 1

首先，很赞成楼主的学习态度！深究原理，才能将技术运用自如。不知道楼主听过&nbsp;BFC&nbsp;没，即&nbsp;Block Formatting Context（块级格式化范围），指的是由于元素使用了某些CSS属性，从而影响了它周围元素（包括嵌套元素）和自身的布局呈现方式。通俗的来讲，它就是一种布局方式，也许你之前用过这种方法来处理页面布局的兼容性，但是你可能并不知道BFC这样一个概念。要形成BFC，需要具备以下条件中某一个：float的值为”left” 或 “right”overflow的值为 hidden、auto、scroll、overflow-x、overflow-y、overlay其中一个display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个position的值为 “absolute” 或 “fixed”中的任何一个楼主使用的是&nbsp;overflow:hidden,导致了右边的div不会和左边左浮动的div进行左边界重叠，而是右边div的左边界紧挨着左浮动div右边界。这正是&nbsp;BFC&nbsp;的一个应用。因为右边div发生BFC后，导致它块级元素产生自包裹行为，填满左浮动div占据的剩余空间。当然你可以使用&nbsp;overflow：auto|scroll|overflow-x|overflow-y|overlay&nbsp;也能实现此类效果。至于&nbsp;overflow: hidden&nbsp;为什么会引发&nbsp;BFC，谁知道呢！因为它不是规范，到目前为止也没有写进规范，开发者更多的是把它当做一种解决方案！