浮动与清除浮动(已完结)

2022-05-27 23:26:34

浮动与清除浮动

浮动

float属性的取值

float : left | right | none | inherit

默认值 : none

适用于所有元素，没有继承性

浮动框的范围

浮动元素的外边距边界定义了浮动框的大小

浮动元素的包含块是其最近的块级祖先元素，且包含块的大小为该块级祖先元素的内容区
浮动元素的特点

1.浮动元素会脱离标准文档流(这就是为什么浮动元素不能撑开父元素的高，以及浮动元素会覆盖非浮动元素的原因)

2.浮动元素会生成一个块级框，而无论这个元素本身是什么(比如行内元素。因此行内元素一旦浮动，便能够为其设置宽高)

浮动元素的一些行为及规则(仅列出一些常用的)

1.浮动元素不能超出包含块的边界(不包括底边)，这就是为什么多个浮动元素出现在同一水平行时，一旦一行容不下后续的浮动元素，后续的浮动元素会换行的原因

但是，如果浮动元素本身的宽就大于包含块的宽，则允许超出

另外，为浮动元素设置负margin，使其超出包含块也是允许的

2.行内框与一个浮动元素重叠时，其边框、背景、内容都在该浮动元素外显示。块框与一个浮动元素重叠时，其边框、背景在该浮动元素之下显示，而内容在浮动元素之外显示

例如

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            width: 100px;
            height: 100px;
            float: left;
            background-color: red;
        }
        span{
            background-color: blue;
        }
    </style>
    <body>
        <div class='div1'></div>
        <span>qwert</span>
    </body>

清除浮动

取值

clear : left | right | both | none | inherit

默认值 : none

适用于块级元素(一定注意)，无继承性

清除浮动的原理

如果元素设置了clear(非none与inherit值)，则用户代理会在元素上外边距的基础上再增加额外的间隔(这个间隔的术语叫‘清除区域’)，以将元素移到浮动框下边界的下面(刚好移到下边界即可)

这就是浮动元素不会覆盖清除浮动元素的原因

怎么使浮动元素也能撑开包含块的高

使包含块也浮动

原理是：浮动元素会延伸，从而包含其所有后代浮动元素

清除浮动

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            width: 100px;
            background-color: red;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: orange;
            float: left;
        }
        .flag-clear{
            clear: both;
        }
    </style>
    <body>
        <div class='wrapper'>
            <div class="inner"></div>
            <div class="flag-clear"></div>
        </div>
    </body>

只要flag-clear在清除浮动后，逻辑上在inner后面即可，并不用给flag-clear设置大小。撑开的原理就是前面说的——flag-clear的上外边距会增加

伪元素与clear相结合(常用)

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            width: 100px;
            background-color: red;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: orange;
            float: left;
        }
        .wrapper::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
    <body>
        <div class='wrapper'>
            <div class="inner"></div>
        </div>
    </body>

ps：本文案参考了以下书籍
《CSS权威指南》

原文发布时间：2018年06月29日 16:47:17

原文作者：earth_smallma

本文来源CSDN，如需转载请联系原作者

码农公寓