html:使用div时如何左右布局？

Question

        .area
        {

            background-color: green;
            height: auto;
            border: 2px solid;
            margin: auto;
        }
        .rightarea
        {
            float: left;
            width: 30%;
            height: 300px;
            background-color: red;
        }
        .leftarea
        {
            float: left;
            width: 30%;
            height: 300px;
            background-color: yellow;
        }

<div class="area">
    <div class="leftarea">
    </div>
    <div class="rightarea">    
    </div>    
</div>

上面代码的效果如下：

我疑惑的是为什么边框没有包括两个子div。然而我设置了area的高度却可以正确包括两个子div。

Answer 1

这个是浮动导致的父元素高度塌陷，你需要给给父元素清楚浮动，代码如下

.clearfix:befor,
.clearfix:after{
    content:'';
    display:block;
}
.clearfix{
    clear:both;
}

Answer 2

两个子元素浮动之后就脱离文档流，无法撑起外部盒子，此时area的高度也就是你设置的border，设置area的高度后area自己有高度了，但是实际上已经没有包括两个子div的意思了，你要理解脱离文档流
当然，清除浮动也是可以的，比如，给area加个overflow:hidden，area就可以被撑起来了

Answer 3

浮动元素是脱离了文档流的，其他元素都视其为不存在。可以将父元素设置为内联块状元素，使父元素包裹子元素。也可以在父元素设置overflow:hidden来实现。

http://codepen.io/huangbuyi/p...

Answer 4

推荐楼主了解一下文档流，然后块级元素block和行内元素inline的区别，一切就都清楚了