清除浮动方法

最新推荐文章于 2024-08-25 04:44:58 发布

原创最新推荐文章于 2024-08-25 04:44:58 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #布局

web前端同时被 3 个专栏收录

19 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

清除浮动方法
1.产生浮动原因
今天遇到一个css布局问题，父元素div里的子div元素居然跑到父元素外面，不再撑开父元素，查原因是产生了浮动，看现象如下：

这里写图片描述

图里，两个子div（蓝色）元素应该都包含在父div（绿色）里才对，居然跑到父容器外了，看起来就是父元素没有被撑开。

看代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fdiv{
            width: 400px;
            border: 1px solid #27AE60;
        }
        .left,.right{
            width: 160px;
            height: 100px;
            border: 1px solid #178fe5;
        }
        .left{
             float: left;
        }
        .right{
            float: right;
        }
    </style>
</head>
<body>
    <div class="fdiv">
        <div class="left"></div>
        <div class="right"></div>
    </div>

</body>
</html>

看代码说话，按理，父元素的高度是由其所包含的子元素高度决定的，在没有设置父元素高度请款下，高度应该是子元素高度100px，但这里父元素高度并没有呀！为什么？
我查了原因才知道这是由于子元素设置了float属性，所以产生了这种现象。为什么会这样？我再查了原因：
浮动定位是脱离正常文档流布局定位的，子元素设置了float属性，脱离正常文档流布局，父元素没有高度属性，自然不会把子元素包含进去。
那么知道怎么回事，接下来就找了几种清楚浮动的方法啦：）

2.解决方法总结
第一种：为父元素设置适合高度。我比较懒，想到的第一个方法自然是给父元素div找个适合的高度哈哈哈哈：

<style>
    .fdiv{
        width: 400px;
        height: 100px;
        border: 1px solid #27AE60;
    }
    .left,.right{
        width: 160px;
        height: 100px;

        border: 1px solid #178fe5;
    }
    .left{
         float: left;
    }
    .right{
        float: right;
    }
</style>

简单粗暴有木有！？
不想那么low，也可以这样解决：

第二种：添加伪类清除浮动，在子元素后再加个兄弟div元素，设置样式clear清除浮动，直接加一个div冗余标签有违语义化规则，所以这里我想到用伪类来给父元素加特殊样式，在W3C标准有这样定义：::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fdiv{
            width: 400px;
            border: 1px solid #27AE60;
        }
        .common{
            width: 160px;
            height: 100px;
            border: 1px solid #178fe5;
        }
        .left{
             float: left;
        }
        .right{
            float: right;
        }
        .fdiv:after{
            content: "";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
    <div class="fdiv">
        <div class="common left"></div>
        <div id="next" class="common right"></div>
    </div>
</body>
</html>