CSS之标准流（普通流）、浮动以及清除浮动的方法

传统网页布局的方式有三种：

1.普通流（标准流）

2.浮动

3.定位

一、标准流（普通流/文档流）

标签按照规定好的默认方式排列

1.块级元素独占一行，从上到下排列，常用的会计元素如div、hr、p、h1~h2、ul、ol、dl、form、table

2.行内元素会按照顺序从左到右排序，碰到父元素边缘自动换行。常用的元素：span、a、i、em

二、浮动

1.使用浮动的原因：很多布局效果，标准流是没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变标签默认的排列方式。浮动最典型的应用：多个块级元素一行内排列显示，多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

2.什么是浮动

float属于用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含快或者另外一个浮动框的边缘。其语法如下

选择器{float:属性值;}

属性值	描述
none	元素不浮动(默认值)
left	元素向左移动
right	元素向右移动

3.浮动的特性

3.1 浮动元素会脱离标准流

脱离标准流的控制，移动到指定位置
浮动的盒子不在保留原先的位置，其他盒子会占据他原先的位置，而出现两个盒子层叠的效果（浮动盒子悬浮在其他盒子表面）

3.2浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置的浮动，则他们会按照属性值一行内显示，并顶端对齐排列。
浮动元素互相贴靠在一起，没有缝隙，如果父级元素宽度装不下浮动盒子，多出的盒子会另起一行对齐。

3.3浮动的元素会具有行内快元素的特性

任何模式的元素添加浮动之后都具有行内块元素相似的特性
块级元素如果没有设置宽度，默认的宽度和父级一样宽，但是添加浮动后，他的大小根据内容来定。

4.浮动元素经常和标准流父级搭配使用

为了约束浮动元素的位置，先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

案例一

如类似这种几个排版相同的盒子排成一排，可用无序列表来做，采用父级标准流+float搭配应用。代码如下：


<html>
<head>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }
        li
        {
            list-style: none;
        }
        .box
        {
            width: 100%;
            height: 300px;
            background-color: #f3f5f0;
            padding-left: 0px;
        }
        .box li
        {
            width: 311px;
            height: 283px;
            float: left;
            margin: 2px;
            background-color: #fdfffc;
            text-align: center;
            position: relative;
        }
        .box img
        {
            width: 311px;
            height: 171px;
            float: left;
            margin: 1px;
            text-align: center;
        }
        
        .p_dbt
        {
            font-size: 12px;
            position: relative;
            top: 30px;
        }
        .p_xbt
        {
            font-size: 12px;
            position: relative;
            top: 40px;
            color: #d6d8d7;
        }
        
        /* 注意此处的权重要比上面的权重高，才能去除最后一个盒子的右外边距 */
        .box .last
        {
            margin-left: 0px; /*去除最后一个盒子的右外边距，否则最后一个盒子会被挤到下一行。*/
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>
            <img src="bupic/1.png" />
            <p class="p_dbt">
                这是一张非常好看的图片这是一张</p>
            <p class="p_xbt">
                你看看</p>
        </li>
        <li>
            <img src="bupic/2.png" />
            <p class="p_dbt">
                标题图片的</p>
            <p class="p_xbt">
                你看看</p>
        </li>
        <li>
            <img src="bupic/3.png" />
            <p class="p_dbt">
                标题图片的</p>
            <p class="p_xbt">
                你看看</p>
        </li>
        <li>
            <img src="bupic/4.png" />
            <p class="p_dbt">
                标题图片的</p>
            <p class="p_xbt">
                你看看</p>
        </li>
        <li>
            <img src="bupic/1.png" />
            <p class="p_dbt">
                标题图片的</p>
            <p class="p_xbt">
                你看看</p>
        </li>
        <li>
            <img src="bupic/2.png" />
            <p class="p_dbt">
                标题图片的</p>
            <p class="p_xbt">
                你看看</p>
        </li>
    </ul>
</body>
</html>

运行效果如下

案例二、将一个整体分为左右两部分，整体用一个div,在其中嵌套两个浮动的div,右边的div中放八个浮动无须列表或者div。代码如下所示


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .box
        {
            width: 1226px;
            height: 100%;
            margin: 0 auto;
            background-coloe: pink;
        }
        .left
        {
            float: left;
            width: 234px;
            height: 100%;
            background-coloe: purple;
        }
        .right
        {
            float: right;
            width: 992px;
            height: 100%;
            background-color: skyblue;
        }
        
        .right > div
        {
            float: left;
            width: 30%;
            height: 300px;
            margin: 14px;
            background-color: #fff;
              text-align: center;
        }
        
        
         .right >div>a> img
        {
            width: 294px;
            height: 171px; 
            margin: 1px;
            text-align: center;
           
           
        }
        a{ text-decoration:none}
        a:link{color:#000 }
        a:visited{color:red}
        .p_dbt
        {
            font-size: 12px;
            position: relative;
            top: 30px;
        }
        .p_xbt
        {
            font-size: 12px;
            position: relative;
            top: 40px;
            color: #d6d8d7;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            左位置</div>
        <div class="right">
            <div >
            <a href="#">
                <img src="bupic/1.png" />
                <p class="p_dbt">
                    非常美丽的图片</p>
                <p class="p_xbt">
                    你看看</p></a>
            </div>
             <div >
            <a href="#">
                <img src="bupic/2.png" />
                <p class="p_dbt">
                    非常美丽的图片</p>
                <p class="p_xbt">
                    你看看</p></a>
            </div>
              <div >
            <a href="#">
                <img src="bupic/3.png" />
                <p class="p_dbt">
                    非常美丽的图片</p>
                <p class="p_xbt">
                    你看看</p></a>
            </div>
              <div >
            <a href="#">
                <img src="bupic/4.png" />
                <p class="p_dbt">
                    非常美丽的图片</p>
                <p class="p_xbt">
                    你看看</p></a>
            </div>
              <div >
            <a href="#">
                <img src="bupic/1.png" />
                <p class="p_dbt">
                    非常美丽的图片</p>
                <p class="p_xbt">
                    你看看</p></a>
            </div>
                <div >
            <a href="#">
                <img src="bupic/2.png" />
                <p class="p_dbt">
                    非常美丽的图片</p>
                <p class="p_xbt">
                    你看看</p></a>
            </div>
        </div>
    </div>
</body>
</html>

运行效果如下：

三、清除浮动

1.为什么要清除浮动？

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

2.清除浮动的本质

清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

3.清除浮动策略

闭合浮动。只让浮动在父盒子内部影响。不影响父盒子外面的其他盒子。

4.语法

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除两侧浮动元素

5.清除浮动的方法

5.1额外标签法

额外标签法又称为隔墙法，W3C推荐做法。

额外标签法会在浮动元素末尾加一个空标签。例如<div style="clear: both"></div>，或者其他标签（如<br/>等）

优点：通俗易懂，书写方便。

缺点：添加许多无意义标签，结构化差。

注意：要求这个新空标签必须是块级元素。

5.2父级添加overflow

可以给父级添加overflow属性，将其属性设置为hidden、auto或者scroll。

优点：代码简洁

缺点：无法显示溢出部分

5.3:after伪元素法

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


.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1; /* IE6、7专有 */
}

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

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

5.4双伪元素清除浮动

也是给父元素添加。


.clearfix:befor,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix:{
    *zoom: 1; /* IE6、7专有 */
}

优点：代码更加简洁

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

相关阅读:
『吴秋霖赠书活动｜第二期』《ChatGPT原理与实战》
各地区农村及城镇恩格尔系数数据集（1978-2022年）
【计算机网络笔记】DNS报文格式
 【腾讯云Cloud Studio实战训练营】戏说cloud studio
walking机器人仿真教程-应用-多点导航结合闹铃播放实现移动闹钟
 jpsall脚本
 Android OpenGL ES 学习(五) -- 渐变色
 openai/chatgpt的api接口，各个模型的最大输入token一览表
 【HMS core】【FAQ】Health Kit、In-App Purchases、Account Kit典型问题合集4
前后端交互常见的几种数据传输格式 form表单+get请求 form表单+post请求 json键值对格式
原文地址：https://blog.csdn.net/bbj123456/article/details/125405041