浮动、清除浮动

标准流

又称：文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见排版规则        1、块级元素        从上往下 直布局 独占一行

        2、行内元素和行内块元素        从左往右 水平布局 空间不够自动折行

浮动

作用早期的作用 图文环绕

        现在的作用 用于布局 让垂直布局的盒子变成水平布局，如：一个在左，一个在右

代码

        float：left 左浮动

        float：right 右浮动

浮动的特点

        1、浮动的元素会脱离标准流        相当于飘到了空中        在标准流中就不占位置

2、浮动的元素比标准流高出半个级别        可以覆盖标准流中的元素

3、浮动找浮动        下一个浮动元素会在上一个浮动元素后面左右浮动

4、浮动会受到上面元素边界的影响

5、浮动的元素有特殊的显示效果        1、一行可以显示多个        2、可以设置宽高

注意点：浮动的元素不能通过text-align：center或者margin：0 auto，让浮动的元素水平居中

清除浮动

含义 清除浮动带来的影响

影响 如果子元素浮动，此时子元素不能撑开标准流的块级父元素。

清除浮动的方法

1、直接设置父元素的高度

2、额外标签法

        1、在父元素的最后添加一个块级元素

        2、需要给添加的块级元素设置清除浮动的核心代码：clear：both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3、单伪元素清除法

用伪元素替代了额外标签

::before ...之前

::after ...之后

两个::是css3的规范，如果要兼容老版本的浏览器，一般使用的是:

代码

content：‘’；

//伪元素必加的属性

display：block

//伪元素默认是行内元素，需要转换成块级元素

clear:both

//清除浮动的核心代码

补充的代码（作用：就是在页面中看不到伪元素）

height：0；

visibility：hidden         元素隐藏

4、双伪元素清除法

作用

1、清除浮动

2、解决外边距折叠的塌陷现象

代码

.clearfix::before,

.clearfix::after {

     content: "";

     display: table;

}

.clearfix::after {

     clear: both;

}

5、给父元素设置一个overflow：hidden