javascript - HTML 左右布局原理请教

Question

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

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

Answer 1

首先，很赞成楼主的学习态度！深究原理，才能将技术运用自如。

不知道楼主听过 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,导致了右边的p不会和左边左浮动的p进行左边界重叠，而是右边p的左边界紧挨着左浮动p右边界。

这正是 BFC 的一个应用。因为右边p发生BFC后，导致它块级元素产生自包裹行为，填满左浮动p占据的剩余空间。当然你可以使用 overflow：auto|scroll|overflow-x|overflow-y|overlay 也能实现此类效果。

至于 overflow: hidden 为什么会引发 BFC，谁知道呢！因为它不是规范，到目前为止也没有写进规范，开发者更多的是把它当做一种解决方案！

Answer 2

建议看看w3school中的关于float的解释

Answer 3

1、第一个p设置为float使得自己脱离文档流。
2、若第一个p不设置margin-right属性的时候，p2将会被其覆盖，沾满整个屏幕的宽度
3、p1设置了margin-right将p2推离自己20px