为了账号安全,请及时绑定邮箱和手机立即绑定

CSS背景色与浮动元素

CSS背景色与浮动元素

忽然笑 2019-11-18 10:36:47
假设我们有一个非常简单的场景 <div class="content">    <div class="left">       <p>some content</p>    </div>    <div class="right">       <p>some content</p>    </div> </div> <div class="content">    <div class="left">       <p>some content</p>    </div>    <div class="right">       <p>some content</p>    </div> </div>这是样式: .content {    width: 960px;    height: auto;    margin: 0 auto;    background: red;    clear: both; } .left {     float: left;     height: 300px;     background: green; } .right {     float: right;     background: yellow; }问题是...当我向其中添加内容时,应该拉下父div,我们需要看到红色背景...问题是,我看不到红色背景充满了所有高度。有任何想法吗???
查看完整描述

3 回答

?
素胚勾勒不出你

TA贡献1827条经验 获得超9个赞

当子元素浮动时,它们将从文档流中删除。这样做时,父级将不再具有定义的尺寸,因为子级在技术上不会占用空间。因此,父元素自身折叠。当绝对定位子元素时,也会发生相同的情况。


在这种情况下,我们可以通过添加overflow:hidden到父元素来修复它,从而强制其包含子元素。另外也overflow:auto可以工作。有人可能会建议它比可能更好,overflow:hidden因为您将能够判断出是否有任何计算不可用。


jsFiddle示例


.content {

    overflow:hidden;

}

现在父元素不再折叠,红色背景可见。


如果要在旧版浏览器中寻求支持,也可以使用clearfix,但我不建议这样做。


查看完整回答
反对 回复 2019-11-18
?
幕布斯7119047

TA贡献1794条经验 获得超8个赞

我在内容容器的末尾使用了一个空的clear div


添加了CSS:


.clear {

    clear: both;

}

HTML:


<div class="content">

    <div class="left">

        <p>some content</p>

    </div>

    <div class="right">

        <p>some content</p>

    </div>

    <div class="clear"></div>

</div>


查看完整回答
反对 回复 2019-11-18
?
Smart猫小萌

TA贡献1911条经验 获得超7个赞

您可以尝试此解决方案


.content:before, .content:after {

    content: " ";

    display: table;

    clear: both;

 } 

或在内容div中添加display:table:


.content {

    width: 960px;

    height: auto;

    margin: 0 auto;

    background: red;

    clear: both;

    display: table; 

}


查看完整回答
反对 回复 2019-11-18
  • 3 回答
  • 0 关注
  • 473 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信