学习布局（五）清除浮动

2024-03-23 17:06:34

浮动 -- clear属性

clear:both 设置元素左右两侧均不允许存在浮动元素

清除浮动:

不是把浮动元素删掉,而是取消掉浮动元素效果,对其他元素造成的影响 。

清除浮动的不同类型：

防止浮动元素引起的兄弟级元素布局影响
防止浮动元素引起的高度塌陷

为兄弟元素设置clear样式：

第二个div发生了浮动，这个时候第三个div元素布局可能受到影响，只要为第三个div元素设置clear属性即可，从而去除了浮动元素的影响

 /** 浮动元素对兄弟级元素布局的影响  */
        .box {
            border: 5px solid black;
        }
        .con1 {
            width: 200px;
            height: 100px;
            border: 2px solid seagreen;
        }

       /*  设置浮动不会对之前的兄弟级元素造成影响。之后的兄弟元素会受到影响  */
        .con2 {
            float: left;
            width: 100px;
            height: 100px;
            border: 2px solid saddlebrown;
            background-color: saddlebrown;
        }

        .con3 {
            width: 200px;
            height: 100px;
            border: 2px solid salmon;
            clear:both;
        }

<!-- 浮动元素对兄弟级元素布局的影响 -->
<div class="box">
    <div class="con1">第一个div</div>
    <div class="con2">第二个div,设置了浮动</div>
    <div class="con3">第三个div</div>
</div>

注意点：

并非浮动元素的所有兄弟级元素都要清除浮动，只需针对浮动元素的下个兄弟级元素设置清除浮动即可。
清除浮动后，兄弟级元素margin-top失效的情况，可以设置浮动元素的下边距 margin-bottom

空标签清除浮动：

在浮动的元素后面，增加一个新的标签，这个新的标签是浮动元素的兄弟元素，之后为这个元素设置clear属性

优点：通俗易懂，操作方便
缺点: 会大量添加无语义的空标签,不便于维护

br标签清除浮动:

br标签清除浮动与空标签类似，在浮动元素后面添加一个br, br标签设置clear,并赋值all

   <div class="wrap">
		<div class="con1">div的第一个元素</div>
		<div class="con2">div的第二个元素设置了浮动</div>
		<br clear="all">
		<div class="con3 ">div的第三个元素</div>
 	</div>

利用after伪元素清除浮动：

为当前浮动元素的父级元素添加after伪元素，为after伪元素设置清除浮动的功能代码


.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: '\200B';
    clear: both;
    display: block;
    height: 0px;
}

父元素设置 overflow: hidden; 或 auto

浮动元素与非浮动元素处于同一行的问题:

元素的顺序会发生变化, IE8以上，非浮动元素与浮动元素在同一行时，浮动元素在前，非浮动元素在后

码农公寓