1，一行文字左浮动，一行文字不浮动，二者不会对齐，为什么？当给文字的容器设置overflow:hidden;二者就对齐了。为什么？ 2，代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .p1{ float: left; background: green; } /*#outer{ overflow:hidden; }*/ </style> </head> <body> <div id="outer"> <p class="p1">我们都有一个margint-top和margin-bottom20px</p> <p class="p2">我们都有一个margint-top和margin-bottom20px</p> </div> </body> </html> 3.截图

一行文字左浮动，一行不浮动，二者不对齐？

3 个回答

得票最新

代码宇宙

15.6k62141

发布于
2018-02-28

产生这一现象的原因是浮动元素的外边距不会发生折叠，而普通情况下外边距会发生折叠。

具体到这个例子里面，p1是浮动元素，因此不会发生折叠，它会相对父元素的顶部计算外边距；而p2的外边距会发生折叠，所以它的外边距是相对body来计算的。

而给父元素加上overflow:hidden样式之后，父元素就会形成自己的BFC，因此p2的外边距不再与body发生折叠，这时候p1、p2的外边距都将相对父元素来计算，因此自然就对齐了。此时的情况如下图所示：

而除了overflow:hidden之外，还有其他的方法也能让p1、p2对齐：

把p1添加margin:0，让p1没有外边距，自然就不会偏离了
给outer添加border，原理同overflow:hidden

Luogjy

3717

发布于
2018-02-28

更新于
2018-03-16

首先，尽量不要在css中使用id选择器，id还是留给JS用吧。
但是为了最小改动，这里就不改过来了，以题主的布局为基础，那么我们开始吧~

浏览器会给块级元素一些margin和padding，在没有重置margin和padding的情况下：

<style>
    .p1 {
        /* float: left; */
        background: green;
    }

    .p2 {
        background: blue;
    }

    #outer {
        /* overflow: hidden; */
        background: red;
    }
</style>

图片描述
由于盒模型垂直外边距折叠，上图首先是p1和outer父子间的折叠，然后p1和p2兄弟间的折叠的结果。outer的高度为两个子加一个外边距的和。

折叠规则：
    相邻的外边距都是正数时，折叠结果是两者间较大的值。
    相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
    两个外边距一正一负时，折叠结果是两者的和。

当p1浮动时，代码如下：

<style>
    .p1 {
        float: left;
        background: green;
    }

    .p2 {
        background: blue;
    }

    #outer {
        /* overflow: hidden; */
        background: red;
    }
</style>

图片描述
看上图，浮动元素不参与父级的高度计算，但浏览器给的默认边距依然在，此时outer的高是p2给的，所以outer的背景色都被遮住了。因此看起来是错位的。

当我们加上overflow: hidden;又是什么情况呢，如下：

<style>
    .p1 {
        float: left;
        background: green;
    }

    .p2 {
        background: blue;
    }

    #outer {
        overflow: hidden;
        background: red;
    }
</style>

图片描述
看上图，outer的背景又出来了，为什么呢？因为计算BFC区域高度时浮动元素参与计算，也就是说只要给父级创建BFC就可以了，当overflow值不为visible时就能为父级创建BFC，这就是清除浮动的原理。p1依然是浮动的，所以跟p2重叠了，即遮住了p2的一部分。至于文本，float会使盒子脱离文档流，但不会脱离文本流，这是它的特点，所以以前float就是用来做图文混排的，用来布局只是功能的延伸使用。当然，上图可见此时浏览器给的padding和margin依然生效。

那么除了overflow: hidden;还有其他方式创建BFC吗？当然有：

float值不为none。
position值为fixed或absolute。
display值跟table相关，例如display: table-cell;

当然不同的方式创建BFC达到的效果会不完全一样，例如：

<style>
    .p1 {
        float: left;
        background: green;
    }

    .p2 {
        float: left;
        background: blue;
    }

    #outer {
        background: red;
    }
</style>

图片描述

再例如：

<style>
    .p1 {
        /* 浮动脱离文档流 */
        float: left;
        background: green;
    }

    .p2 {
        background: blue;
        /* 
            绝对定位脱离文档流
            p2写在后面，把p1遮住了
            但也算是p1和p2“对齐”啊
         */
        position: absolute;
    }

    #outer {
        background: red;
        position: relative;
    }
</style>

图片描述

再再例如：

<style>
    .p1 {
        float: left;
        background: green;
        display: table-cell;
        vertical-align: middle;
    }

    .p2 {
        background: blue;
        display: table-cell;
        vertical-align: middle;
    }

    #outer {
        background: red;
        display: table;
    }
</style>

图片描述
上图颜色错觉看起好像不对齐，去掉背景色就看到其实是对齐的。