浮动的清除（1、给浮动的元素的祖先元素加高度、 2、clear:both）

最新推荐文章于 2022-11-12 16:03:56 发布

卡夫卡的baby

最新推荐文章于 2022-11-12 16:03:56 发布

阅读量223

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125649647

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

浮动布局是css布局常用的布局方式之一。

float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。

浮动会产生的负作用：

1、背景不能显示由于浮动产生，如果对父级（这里的父级可以只的是祖先元素）设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开。导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

浮动清除，并不是说，不让某些元素设置浮动。而是说当你给某些元素这是浮动之后，怎么把它在布局中产生的负作用，给清除掉。让其对页面布局没有影响。

1、清除浮动方法：给浮动的元素的祖先元素加高度

浮动带来的错位现象：

本来.nav和.menu这两个盒子应该上下，显示。因为他们各自的子元素设置了浮动。导致，.nav和.menu这两个盒子并排显示了。

预览效果：

解决的方法是：

给浮动的元素的祖先元素加高度，设置，如下所示：

<title>清除浮动方法1:给浮动的元素的祖先元素加高度</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            background-color: pink;
            outline: 1px dashed red;
            /* 清除浮动方法1：给浮动的元素的祖先元素加高度 */
            height: 50px;
        }
        .nav li{
            width: 140px;
            float: left;
        }
        .menu{
            background-color: lightgreen;
            outline: 1px dashed red;
            /* 清除浮动方法1：给浮动的元素的祖先元素加高度 */
            height: 50px;
        }
        .menu li{
            width: 150px;
            float: left;
        }
    </style>
</head>
<body>
   
    <div class="nav">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>html5</li>
            <li>css3</li>
        </ul>
    </div>

    <div class="menu">
        <ul>
            <li>javascript</li>
            <li>jquery</li>
            <li>ajax</li>
            <li>json</li>
        </ul>
    </div>

预览效果：

2、清除浮动方法：clear:both;

给浮动元素的祖先元素，添加clear:both

 <title>清除浮动方法2:clear:both;</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{  
            background-color: darkorchid;
            outline: 1px dashed red;
            height: 60px;
        }
        .nav li{
            width: 140px;
            float: left;
        }
        .menu{
            /*  清除浮动方法2：clear:both; */
            /* 给祖先身上添加，把浮动带来的负面效果清除掉 */
            clear: both;
            background-color: aquamarine;
            outline: 1px dashed red;
            height: 60px;
        }
        .menu li{
            width: 150px;
            float: left;
           
        }
    </style>
</head>
<body>
   
    <div class="nav">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>html5</li>
            <li>css3</li>
        </ul>
    </div>

    <div class="menu">
        <ul>
            <li>javascript</li>
            <li>jquery</li>
            <li>ajax</li>
            <li>json</li>
        </ul>
    </div>

效果图：