您的位置:首页 > 其它

【解决方案】子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

2017-08-09 10:02 603 查看
重点: 给父容器的CSS添加一个 overflow 属性,
overflow:hideen;

-------------------------------------------------------------------------------------以下为转载内容---------------------------------------------------------------------------------------------

方法一:

html:

<div id="all1">

<div id="left1">1</div>

<div id="left2">1</div>

<div style=" clear:both; "></div>

</div>

css:

#left1{ float:left;width:200px;}

#left2{ float:left;width:200px;}

#all1{}

这个方法的关键在于用了clear:both来清除了浮动元素,把父元素all1撑开。
方法二:html:

<div class="aa">

  <div class="bb">sffsssssssssssss</div>

  <div class="cc">sffss</div>

</div>

css:

.aa{ border:1px solid #000; background:#CC4;overflow:hidden;}

.bb { border:1px solid #f00; background:#999; float:left;}

.cc{ border:1px solid #f00; background:#999; float:left;}

此方法的重点在于,子元素有float之后,父元素需要设置一个overflow:hidden;,这样就可以自动撑开父元素aa。

特别注释:

overflow:hidden要有宽度或者高度才会溢出部分隐藏,如果外部盒子没有宽度或者高度,里面又是浮动元素,就会被撑开
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐