CSS3层叠样式表（二）

浮动（float)语法：float:left或者right或者none或者inherit

left：让元素向左浮动       right：让元素向右浮动

none：让元素不浮动       inherit：让元素从父级继承浮动属性

浮动的特点

1. 浮动元素会脱离标准流（简称：脱流），在标准流中不占位置（相当于从地面飘到了空中）；
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素；
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动；
4. 浮动元素会受到上面元素边界的影响（块级元素独占一行）；
5. 浮动元素有特殊的显示效果（一行显示多个，可以设置宽高）；

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

清除浮动（如果子元素浮动了（脱标，不占位置），此时子元素不能撑开标准流的块级父元素）

清除浮动的方法-----①直接设置父元素高度（缺点：有些布局中不能固定父元素高度）

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

③单伪元素清除法-用伪元素替代了额外标签（缺点：在项目中使用，直接给标签加类即可清除浮动）

操作：1.在父元素内容的最后添加一个块级元素；2.给添加的块级元素设置clear：both；

基本写法                                  

.clearfix::after {

            content: '';

            display: block;

            clear: both;

        }

补充写法           

.clearfix::after {

            content: '.';

            display: block;

            clear: both;

/* 补充代码：在网页中看不到伪元素 */

            height: 0;

            visibility: hidden;

        }

④双伪元素清除法（优点：项目中使用，直接给标签加类即可清除浮动）

操作：                                                                 双伪元素清除法也可解决盒子塌陷问题

.clearfix::before,

        .clearfix::after {

            content: '';

            display: table;

        }

        .clearfix::after {

            clear: both;

        }

⑤给父元素设置overflow：hidden（直接给父元素设置overflow：hidden，方便）