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

不予南国
  • 77
        .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。

回复
阅读 30.3k
4 个回答

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

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

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

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

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

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

宣传栏