对浮动的理解以及清除浮动的方法

浮动：float

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

语法

左浮动：float：left;

右浮动：float:right;

浮动特性

浮动的元素会脱离标准流（脱标）【不再保留原来的位置】

浮动元素一行内显示（不会有缝隙，若一行装不下，另起一行），并且顶部对齐

浮动盒子具有行内块元素特性：任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。如果块级元素没有设置宽度高度，设置宽度之后，会根据

内容决定；一行显示，没有缝隙；可以设置宽度和高度

浮动注意点

一般来说一个盒子浮动了，其他的兄弟盒子也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

需要清除浮动的原因

为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响

如果父盒子有高度，则不需要清除浮动

清除浮动之后，父盒子会根据浮动的子盒子来自动检测高度，从而不会影响后面的标准流

语法

clear：left；
clear：right；
clear：both；

 

清除浮动的方法

使用clear属性清除浮动，其语法如下：clear:none|left|right|both，

官方对clear属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

一般使用伪元素的方式清除浮动：

.clear::after{
content:'';
display: block;
clear:both;
}

clear属性只有块级元素才有效的,而::after等伪元素默认都是内联水平,这就是借助伪元素清除浮动影响时需要设置display属性值的原因。

额外标签法：

最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式

  • 行内样式：<div style="clear: both"></div>
  • 类选择器方法：
<style>
.clear {
clear: both;
}
</style>
<div class=”clear“></div>

 

父级添加overflow属性（父元素添加）

包含浮动元素的父级标签添加

overflow：hidden
overflow：scroll
overflow：auto

 

父级添加:: after伪元素（父元素添加）

使用 :：after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

<html>
    <style>
        .father {
            background-color: aqua;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float:left;
        }
        .clearfix::after{
            content: '';
            display: block;
            height: 0;
            clear:both;
            visibility:hidden; 
         } 
        .clearfix {
            *zoom:1
        }
    </style>
    <body>
        <div class="father clearfix">
            <div class="child">child</div>
        </div>
    </body>
</html>

父元素添加双伪元素

<html>
    <style>
        .box{
            background-color: aqua;
        }
        .damao,.ermao{
            width: 100px;
            height: 100px;
        }
        .damao{
            background-color: blue;
            float:left;
        }
        .ermao {
            background-color: blueviolet;
            float:left;
        }
        
        .clearfix::before,.clearfix::after{
            content:'';
            display:table;
        }
        .clearfix::after{
            clear:both;
        }
        .clearfix{
            *zoom:1
        }
    </style>
    <body>
        <div class="box clearfix" >
            <div class="damao">damao</div>
            <div class="ermao">ermao</div>
        </div>
    </body>
</html>

 

 

 

 

posted @ 2022-05-31 20:44  yeqi7  阅读(232)  评论(0)    收藏  举报