简述html 布局的原理,HTML 左右布局原理请教

慕容708150

首先，很赞成楼主的学习态度！深究原理，才能将技术运用自如。不知道楼主听过 BFC 没，即 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”中的任何一个楼主使用的是 overflow:hidden,导致了右边的div不会和左边左浮动的div进行左边界重叠，而是右边div的左边界紧挨着左浮动div右边界。这正是 BFC 的一个应用。因为右边div发生BFC后，导致它块级元素产生自包裹行为，填满左浮动div占据的剩余空间。当然你可以使用 overflow：auto|scroll|overflow-x|overflow-y|overlay 也能实现此类效果。至于 overflow: hidden 为什么会引发 BFC，谁知道呢！因为它不是规范，到目前为止也没有写进规范，开发者更多的是把它当做一种解决方案！