前言

css传统的布局方式分为三种，注意这里说的是传统布局，不包括flex布局和grid布局等。

1.普通流
普通流也称标准流，既标签按照规定好的默认方式排列，是最基本的布局方式
这些标签也是我们学习前端过程中比较基础的标签，分为两类
1.块级元素，特点：独占一行，从上向下顺序排列，常用的标签为div、hr、a、p、h1~h6、table、form等
2.行内标签，特点：相邻行内元素在一行上，一行可以显示多个，从左到右排列，碰到父元素边缘则自动换行
2.浮动 --我们今天要分享的
3.定位 --后面会再分享

为什么需要浮动

学习一个新的知识，我们要先了解学习它的用处，为什么要学它，这里我们思考两个问题
1.如何让多个块级盒子（div）水平排列成一行？有人想我们可以通过给三个div设置 display:inline-block; 把div转换为行内元素，这样三个div就会在同一行展示，当然可以，那样实现效果如下，div直接会有间隙 2.如何让两个盒子左右靠齐？单利用文件流同样不容易实现
总结：有很多布局方式，单只靠标准流我们没办法实现，此时要是利用浮动就能完成布局，因为浮动可以改变元素标签默认的排列方式
其中浮动最典型的应用就是：让多个块级元素展示在同一行排列显示

什么是浮动

float 属性用于创建浮动框，将浮动的框向左移动或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
语法：选择器 {float: 属性值}

属性值	描述
none	不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

浮动的元素会脱标，浮动的盒子不再保留原来的位置
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素具有行内块元素的特性

脱标解释
脱离标准流的控制，浮动到指定的位置简称脱标，浮动后的盒子不再保留原先的位置
一行内显示并且顶端对齐排列解释
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是贴靠在一起的，不会有间隙，如果父元素的宽度装不下那么多浮动的盒子，多余的则换行对齐
具有行内块元素特性解释：
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

使用案例及注意事项

浮动元素经常和标准流搭配使用

注意事项

浮动元素和标准流搭配使用
先用标准流的父元素排列上下位置，然后使用内部子元素采取浮动排列左右元素
一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个盒子，若其中一个盒子浮动了，理论上其余的盒子也要跟着浮动，浮动的盒子之后影响浮动盒子后面的标准流，不会影响前面的

清除浮动

为什么要清除浮动

很情况下父盒子不方便给高度，但如果不给高度,子盒子浮动不占用位置，父盒子位置即为0，会影响下面标准流的布局

清除浮动后，父盒子就会根据浮动的子盒子自动监测到盒子的高度，不会影响到下面的标准流了

清除浮动用法

语法选择器 {clear: 属性值 }

属性值	描述
both	清除左右两侧浮动
left	清除左浮动
right	清除右浮动

实际工作中几乎使用clear:both,清除浮动的策略是闭合浮动

清除浮动的方法

额外标签法，也称隔墙法
父级元素添加 overflow属性
父级元素添加after伪元素
父级元素添加双伪元素

1. 额外标签法
  隔墙法，在最后一个浮动元素后面添加一个额外标签，添加清除浮动样式

<div class="box">
    <div style="float:left">1</div>
    <div style="float:left">2</div>
    <!--这里就是添加了额外的标签,或者其他标签，必须是块级元素），相当于添加了一堵墙把浮动给堵住-->
    <div style="clear:both"></div>
</div>

优点:通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

2. 父级元素添加overflow属性
给父级添加overflow属性，将其设置为hidden、auto或scroll

例：<div style="overflow: auto;">
       <div style="float:left">1</div>
       <div style="float:left">2</div>
    </div>

优点：代码简洁
缺点：无法显示溢出的部分

3. :after伪元素法
:after也是给父元素添加，样式代码如下：

推荐
<!--clearfix为父元素的class类名-->
.clearfix:after { 
    content: "";
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix {
     /* IE6、7 专有 */ 
     *zoom: 1; 
}

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

4. 双伪元素清除浮动
也是给给父元素添加，样式如下

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

优点：代码更简洁缺点：照顾低版本浏览器代表网站：小米、腾讯等

清除浮动总结

父元素没添加高度，子元素有浮动，影响了下面的布局，需要我们清除浮动，采用的策略是闭合浮动，让浮动在父盒子内部影响，不影响父盒子外的其他元素
清除浮动有4中方法

清除浮动的方法	优点	缺点
额外标签法	通俗易懂	添加无意义的标签，结构化比较差
父级overflow:hidden	代码简洁	溢出隐藏
父级添加:after伪元素	结构语义化正确	IE6~7不支持:after,兼容性问题
父级添加双伪元素	结构语义化正确	IE6~7不支持:after,兼容性问题

写在后面

从前端小白到大咖的路上我持续努力着，若觉得这篇文章对你稍微有点启发和帮助，是我的初衷，希望各位不要吝啬你的点赞和关注哟~

CSS传统布局-浮动

前言