css样式的清除浮动

css样式清除浮动
1.Css样式中的float浮动
css样式的float浮动属性，用于设置标签对象（如：

标签盒子、 标签、标签、标签、html标签）的浮动布局，浮动也就是我们所说标签对象浮动居右靠右（float：right）和浮动居左靠左（float：left），文字靠左（text-align:left）文字靠右（text-align:right）
float的作用
通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动

Clear清除浮动
1、clear语法
clear：none|left|right|both
2、clear参数值说明
none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
3、clear解释
clear属性的值指出了不允许有浮动对象的边情况，又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。
4、css结构
div{clear:left}
div{clear:right}
div{clear:both}
当我们使用float css样式后产生浮动，最常用是使用clear：both清除浮动。比如一个对象里有两个小对象使用了css float样式为了避免产生浮动，大对象的背景或边框不能正确显示，这个时候我们就需要clear：both清除浮动。

css使用伪元素清除浮动
1、伪元素
插入伪元素:before :after
2、利用伪元素清除浮动
.clearfix::after
.clearfix::before
3、css使用伪元素清除浮动
原理：在HTML中每一个标签后都会存在前后节点::before、::after，前后节点设置一个块状空元素来清空容器的浮动效果
.clearfix::after{
content: “”;
display:block;
visibility: hidden;/将元素隐藏起来/
height: 0;
clear: both;
/在页面的clear fix元素后面添加了一个空的块级元素，这个元素清除了浮动/
}
同时在这里display和visibility的区别是：前者不会占用页面空间，后者会占用页面空间。