浮动应用场景浮动的基本特点高度坍塌解决浮动时盒子冲突问题

最新推荐文章于 2024-10-09 14:44:12 发布

六行代码

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量726

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_55751104/article/details/128760815

版权

浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为：

left：左浮动，元素靠上靠左
right：右浮动，元素靠上靠右

默认值为none

当一个元素浮动后，元素必定为块盒(更改display属性为block)
浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

宽度为auto时，适应内容宽度
高度为auto时，与常规流一致，适应内容的高度
margin为auto，为0。
边框、内边距、百分比设置与常规流一样，百分比与父盒子的内容的宽度有关，但高度是看情况的，不一定都和父盒子的高度有关。
宽、高设置为auto时，他们一般都是适应内容大小。

盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子考上靠右排列
浮动盒子在包含块中排列时，会避开常规流块盒
常规流块盒在排列时，无视浮动盒子
行盒在排列时，会避开浮动盒子
外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

在这里插入图片描述

<!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>

        .container{
            width: 1000px;
            height: 500px;
            background: lightblue;
        }

        .item{
            float: right;
            width: 100px;
            height: 100px;
            border: 2px solid;
            background: red;
            color: #fff;
            font-size: 2em;
        }
        .normal{
            height: 60px;
            background: #008c8c;
        }
    </style>
</head>
<body>
     <div class="container">
        <div class="normal"></div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
     </div>
</body>
</html>

文字环绕

想要设置图片环绕的效果，需要对图片的外边距进行设置，而不是p的外边距，因为p标签的外边距会把下边所有的文章都进行了移动。
在这里插入图片描述

高度坍塌

高度坍塌是指在设置浮动之后，背景的宽度不会被撑大，背景忽略了浮动的盒子内容，但取消浮动之后，背景又被撑开了
在这里插入图片描述
无浮动的图

这是有浮动的图

因为浮动盒子脱离了常规流盒子，导致高度坍塌，但这是在自动高度的前提下。

高度坍塌的根源：常规流盒子，在计算时，不会考虑浮动盒子

解决办法：

清除浮动，涉及css属性：clear

默认值：none
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

一般再加一个盒子的方式不常用，因为为了解决高度坍塌，再去加一个盒子有点奇怪。

常用办法：
一般用类名 ::after 方法，调用item下面的normal（自定义名字），将normal设置成空的，在设置clear：both 让它可以显示在浮动元素的下面。

<!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>

        .container{
            /* width: 1000px;
            height: 500px; */
            background: lightblue;
        }

        .item{
            float: right;
            width: 200px;
            height: 200px;
            border: 2px solid;
            background: red;
            margin: 6px;
            /* color: #fff; */
            /* font-size: 2em; */
        }
        .normal::after{
            content: "";
            display: block;
            clear: both;            
        }
    </style>
</head>
<body>
     <div class="container normal">
        
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="normal"></div>
     </div>
</body>
</html>