[css]浮动造成的影响

最新推荐文章于 2025-08-23 22:56:15 发布

weixin_30595035

最新推荐文章于 2025-08-23 22:56:15 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

文章标签：面试

原文链接：http://www.cnblogs.com/iiiiiher/p/8446755.html

本文探讨了在使用浮动布局时遇到的问题，包括如何解决浮动导致的父元素高度缺失，以及如何确保多个浮动元素能够正确地分行显示。通过具体的代码示例说明了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动造成的影响: 子元素浮动,父元素无法被撑出高了.

如果要给父元素做通栏background?
如果两个box的子元素都浮动,且希望两个box分行显示?

box1 box2 box3: float:left, 则box自己的高度就没办法被撑开了

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

现实案例: 需要给父盒子做通栏背景图

现子元素浮动,父元素没高度了,没法加了.

<div class="content">
    <div class="ad "></div>
    <div class="news"></div>
</div>

现实案例: 盒子需要分两排显示

子元素浮动,2个父元素都没高度,所以连个父元素的子元素都并排显示了, 没办法分行显示

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        li{
            float: left;
            width: 100px;
            text-align: center;
            background: yellowgreen;
        }
    </style>

    
<div class="box1">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
</div>

<div class="box2">
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

按理说2个box,分行显示没问题,但此时这两个box的子box发生了浮动, 发生浮动的子元素无法撑开父box, 导致两个父box的内容并排显示了.