CSS浮动知识的自我总结_css盒模型的浮动实训心得-CSDN博客

本文链接：https://blog.csdn.net/VAEaaaa/article/details/111026076

CSS苦逼学习日记（4）

本日记讲述了我学习浮动的总结。

浮动的意思是 float；

特点：

1.一个不管是行内元素还是块级元素还是什么什么的，只要给它设置了浮动（float），就可以给它设置宽度和高度了。

2.浮动的元素会脱离标准流，不占有位置，相当于一个在路上排队的人上天了，在天上排队，在下面排队的人因为这个位置空缺，自然的可以向前进（浮动的元素可以设置高宽但是不占有位置），下面不是浮动的元素会占有浮动元素的位置，但是会被浮动的元素压在下面。

3.设置浮动的元素之间没有默认的内外边距了，会紧紧的贴在一起，若要分开，要单独的设置margin和padding值等。

4.因为浮动元素不占有位置，装浮动元素的父盒子若不设置高度和宽度的话，块级的父级盒子是没有高度的，行内块元素是没有高度和宽度的，这就会造成父元素塌陷（下面的盒子挤上来占了父盒子的位置），所以我们需要清除浮动。

5.浮动元素原本的作用是用来做文字环绕的，和浮动元素相同层级的文本不会占有浮动元素的位置，而围绕浮动元素铺平显示。

简单使用：

注意，若在父盒子内给一个子盒子设置了浮动，最好给全部的盒子都设置浮动，不然可能会出现某些问题。

1.float left;
这个是向左浮动的意思，

2.float right:
这个是右浮动的意思

左浮动和右浮动的范围都是在父盒子内部而言。

清除浮动的4种方式：

1.额外标签法：也是w3c（万维网）推荐的做法
案例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    .nav {
        width: 600px;
        margin: 0 auto;
        background-color: gray;
    }
    .bla {
        background-color: black;
        height: 200px;
    }
    .nav .son {
        float: left;
        width: 148px;
        margin-right: 2px;
        height: 200px;
        background-color: pink;
        list-style: none;
    }
    .nav #son1 {
        margin-right: 0px;
    }
    .nav .last {
        clear: both;
    }
</style>
<body>
    <ul class="nav">
        <li class="son"></li>
        <li class="son"></li>
        <li class="son"></li>
        <li class="son" id="son1"></li>
        <div class="last"></div>
    </ul>
    <div class="bla"></div>
</body>
</html>

此方法是在全部浮动元素的最后加一个额外的标签，本例加的是div的标签，然后给此标签添加一个属性：

clear:both

2.使用 overflow:hiddem；

案例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            width: 600px;
            background-color: gray;
            margin: 0 auto;
            list-style: none;
        }
        .nav .son {
            float: left;
            width: 148px;
            height: 200px;
            background-color: pink;
            margin-right: 2.6px;
        }
        .nav #son4 {
            margin-right: 0;
        }
        .last {
            background-color: black;
            height: 100px;
        }
        .nav {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li class="son">4</li>
        <li class="son">4</li>
        <li class="son">4</li>
        <li class="son" id="son4">4</li>
    </ul>
    <div class="last"></div>
</body>
</html>

此方法是给浮动元素的父元素增加了一个：

 overflow: hidden;

属性使得浮动被清除

3.单伪元素清除浮动：（工作常用，熟记）：

.clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix{
            *zoom: 1;
        }

解释：在css代码中添加这两行代码，然后把 clearfix 添加在浮动元素的父盒子的类里面即可清除浮动，

必须的内容content：“”，就算什么也不加也需要写上这句话才能起作用（伪元素的特点）

visibility是可视化的意思，hidden就算隐藏，把可视化隐藏了，就看不见了

.*zoom 1 是为了照顾更低版本的浏览器而设置的

4.双伪元素清除浮动（也是工作中经常用的，须记住）

代码如下：

.clearfix::before,
.clearfix::after {
content: "";
display: table;
}

.clearfix::after {
clear: both;
}
.clearfix {
*zoom : 1;
}

同单伪元素一样，也是给浮动元素的父盒子添加一个 clearfix 的类,
代码续记住！！

到此为止。2020/12/10日记