清理浮动的方法

时间 2019-11-30

标签清理浮动方法繁體版

原文原文链接

浮动出现的缘由:css

一开始浮动被建立的缘由是为了实现报纸文字环绕图片的格式，以下图，后来通过你们的学习研究后才发展出了后来的一系列功能。html

盒子浮动清理：app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        .wrapper{
            border: 5px solid salmon;
        }
        .wrapper .red{
            width: 100px;
            height: 100px;
            background-color: lightblue;
            float: left;
            margin-right: 10px;
        }
    </style>
    <body>
        <div class="wrapper">
            <div class="red"></div>
            <div class="red"></div>
        </div>
    </body>
</html>

未清理浮动前

清理浮动的方法：ide

一、伪元素 ::after 学习

.wrapper::after{
    content: "";
    display: block;
    clear: both;
}

二、触发BFCspa

1）overflow:hidden;3d

.wrapper{
    overflow: hidden;
}

2） float:left/right 或者 position:fixed/absolute （父级元素会被内部改成 inline-block ）code

注意：在使用BFC清理浮动时，须要配合实际须要，只有实际状况容许的时候选择BFC才能够，好比：若是要求父级元素必须为 block时，就不能够用float 或者position ; htm

三、块级元素style 添加 clear:both;(不推荐，这样会改变html结构)blog

在wrapper 盒子内最下面加 <p style="clear: both;"></p>；