javascript - HTML 左右布局原理请教
问题描述
<div style="float:left;width:200px;margin-right:20px;">左右
</div>
<div style="overflow:hidden">右侧</div>
请问这个原理是什么?能具体剖析下吗?
首先,很赞成楼主的学习态度!深究原理,才能将技术运用自如。
不知道楼主听过 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
,谁知道呢!因为它不是规范,到目前为止也没有写进规范,开发者更多的是把它当做一种解决方案!
这篇关于javascript - HTML 左右布局原理请教的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!