【CSS学习笔记五】浮动（特性、布局的原则、清除浮动）

waski

于 2023-12-05 12:28:03 发布

阅读量922

点赞数 16

分类专栏：前端之路文章标签： css 前端笔记

本文链接：https://blog.csdn.net/waski/article/details/134804022

版权

前端之路专栏收录该内容

19 篇文章 1 订阅

订阅专栏

文章目录

- 13 浮动 `float：none|left|right;`

13 浮动 `float：none|left|right;`

传统PC端网页布局（摆盒子）的三种方式：

标准流（普通流）：标签按照规定好默认方式排列（最基本的布局方式）
1. 块级元素独占一行，从上到下顺序排列
2. 行内元素会按照顺序，从左到右顺序排列，碰到父类元素边缘则自动换行。
浮动：可以改变元素标签默认的排列方式
典型应用：让多个块级元素一行内排列显示
定位
网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性：用于创建浮动框，将其移动到一边，直到左边缘/右边缘/另一个浮动框的边缘（贴在一起）

float：none(默认) | left | right;

13.1 浮动特性

1.浮动元素会脱离标准流(脱标)

2.浮动的元素会一行内显示并且元素顶部对齐(对齐)

3.浮动的元素会具有行内块元素的特性

13.1.1 脱标

给盒子浮动属性后，原来的盒子会脱离标准流的控制，不再属于普通的盒子。

脱离标准流（浮）的浮动盒子移动到指定位置（动）
浮动的盒子不再保留预先的位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fudong{
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;   加入浮动
        }
        .putong{
            width: 500px;
            height: 500px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="fudong">我是一个浮动的盒子</div>
    <div class="putong">我是一个标准流的盒子</div>
</body>

</html>

现在我们给上面蓝色盒子浮动属性后：

原来的蓝色盒子会移动到浮动的位置，然后**“浮起来”**，原来的位置就不再存在了，后面的标准流的盒子会占据这个位置。

加上浮动，相当于就是网页有两层，上面一层浮在网页1 上。

13.1.2 对齐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fudong{
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
        .putong{
            width: 500px;
            height: 500px;
            background-color: brown;
            float: left;
        }
        .fong{
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;
        }
    </style>
</head>

<body>
    <div class="fudong"></div>
    <div class="putong"></div>
    <div class="fong"></div>
</body>

</html>

设置了三个不同大小的盒子，都给浮动属性。那么这三个盒子会在上边缘对齐，一行显示，没有缝隙

如果一行装不下所有的浮动盒子，那么装不下的盒子会自动移到第二行。

13.1.3 行内块元素特性

13.1.3.1 行内元素→行内块元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            float: left;
        }
        .hangnei1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .hangnei2{
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>

<body>
    <span class="hangnei1">行内元素1</span>
    <span class="hangnei2">行内元素2</span>
</body>

</html>

行内元素<span>通过添加浮动，具有了行内块元素设置宽、高的特性

13.1.3.2 块元素→行内块元素

块元素<P>也具有行内块元素的特性：如果没有指定高宽，那么就通过里面内容长度需要的高宽来确定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            background-color: aqua;
            float: left;
        }
    </style>
</head>

<body>
    <p>我是一个块级元素</p>
</body>

</html>

13.2 布局的原则

为了约束浮动元素位置，网页一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 120px;
            height: 46px;
            background-color: pink;
            margin: 0,auto;       后面left盒子和right盒子对齐都以这个大盒子box为准
        }
        .left{
            float: left;
            width: 23px;
            height: 46px;
            background-color: purple;  在大盒子里左浮动对齐
        }
        .right{
            float: left;
            width: 97px;
            height: 46px;
            background-color: skyblue;  在大盒子里左浮动对齐
        }
    </style>
</head>

<body>
    <div class="box">   
        <div class="left">左侧</div>   在大盒子里定义小盒子
        <div class="right">右侧</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动元素搭配标准流父盒子2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;   /* 去掉li前面的小圆点 */
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;    /* 居中对齐 */
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }

        /* 这里必须写 .box .last 要注意权重的问题  20 */
        .box .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

</html>

在粉色的大盒子里面布置4个小盒子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常见网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>

13.3 清除浮动 `clear: both;`

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            background-color: green;
        }

        .one {
            width: 400px;
            height: 400px;
            background-color: pink;
            float: left;
        }

        .two {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            float: left;
        }

        .three {
            width: 400px;
            height: 400px;
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <div class="one">第一个浮动</div>
        <div class="two">第二个浮动</div>
        <div class="three">第三个浮动</div>
    </div>
</body>

</html>

如果没有清除浮动产生的影响：

那么父级块盒子（绿色）在没有指定宽高时，其高度会变成0。为了清除这种影响，我们需要使用下面的几种方法

语法：clear: both;

闭合浮动四种方式：

额外标签法也称为隔墙法，是W3C推荐的做法。
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

13.3.1 额外标签法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            background-color: green;
        }

        .one {
            width: 400px;
            height: 400px;
            background-color: pink;
            float: left;
        }

        .two {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            float: left;
        }

        .three {
            width: 400px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .clear{
            clear: both;    /* 给最后的盒子加上clear: both; */ 
        }
    </style>
</head>

<body>
    <div>
        <div class="one">第一个浮动</div>
        <div class="two">第二个浮动</div>
        <div class="three">第三个浮动</div>
        <div class="clear"></div>    /* 在最后位置加一个块元素  */
    </div>
</body>

</html>

在浮动盒子的最后一个后面加上一个空盒子（只能是块级元素的盒子）

总结：额外标签法会在浮动元素后面添加一个空的块级元素标签。例如：<div class="clear"></div>。

优点：通俗易懂

缺点：添加了无意义的标签

13.3.2 父级添加overflow属性 `overflow：hidden;`

可以给父级添加overflow：hidden、auto 或scroll

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            overflow: hidden;    /* 给父级添加该属性 */ 
            background-color: green;
        }

        .one {
            width: 400px;
            height: 400px;
            background-color: pink;
            float: left;
        }

        .two {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            float: left;
        }

        .three {
            width: 400px;
            height: 400px;
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="one">第一个浮动</div>
        <div class="two">第二个浮动</div>
        <div class="three">第三个浮动</div>
    </div>
</body>

</html>

优点：代码简洁

缺点：无法显示溢出的部分

13.3.3 :after伪元素法

:after方法是额外标签法的升级版，也是给父元素添加。

:after就是给父元素添加一个新的属性：

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

这个的意思：在原来的父级块后面再加一个子块，这个子块看不到，只是起一个占位的作用。

after: 在父级元素的最后面
content：加一个内容，这个加的东西为一个行内元素
display：将这个行内元素转换为块级元素
height：将这个块级元素的高度变为0
visibility：将这个块级元素变为不可见
clear:both ：清除浮动的影响
zoom:1：CSS为了兼容IE6、7清除浮动的一种写法

最后的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
			zoom:1;
		}
        
        .father {
            overflow: hidden;
            background-color: rgb(154, 192, 50);
        }
        
        .one {
            width: 400px;
            height: 400px;
            background-color: aqua;
            float: left;
        }

        .two {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            float: left;
        }

        .three {
            width: 400px;
            height: 400px;
            background-color: rgb(201, 22, 46);
            float: left;
        }
    </style>
</head>

<body>
    <div class="father clearfix">    /*父元素的class名字后面加上clearfix*/
        <div class="one">第一个浮动</div>
        <div class="two">第二个浮动</div>
        <div class="three">第三个浮动</div>
    </div>
</body>

</html>

优点：没有增加标签，结构简单

缺点：需要照顾低版本的浏览器

代表网站：百度、淘宝网、网易等

13.3.4 双伪元素清除浮动

双伪元素法也是给父类元素添加：

.clearfix:before,clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix {
	*zoom:1;
}

双伪元素清除浮动的方法，类似于前面的方法，就是在父级元素盒子的前面和后面都加上一个新的小盒子，然后clear:both

代表网站：小米、腾讯等