码迷,mamicode.com
首页 > Web开发 > 详细

css 子元素设置float,父元素高度塌陷

时间:2017-05-22 15:22:20      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:content   contain   zoom   color   code   属性   元素   style   play   

以div元素为例。div元素的高度会通过内容自动撑开。也就是说,内容有多少,高度就有多高。但是当内部元素设置了float属性之后,会是父元素高度塌陷

<div class="container">
       <p>Hello World!Hello World!</p>
       <div class="clearfix"></div>
</div>

清除浮动的方法

父元素底部添加空div,然后在添加属性clear : both

.container .clearfix {
  overflow: hidden;
  *zoom: 1;
}

父元素设置伪类after

.container:after {
  content: "";
  display: table;
  clear: both;
}

 

css 子元素设置float,父元素高度塌陷

标签:content   contain   zoom   color   code   属性   元素   style   play   

原文地址:http://www.cnblogs.com/szatpig/p/6889018.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!