css浮动样式和清除浮动

浮动用法、

css样式的float浮动属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

float的作用
通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。

浮动产生负作用

1、背景不能显示

由于浮动产生，如果对父级设置了，背景、背景颜色、背景图片，而父级不能被撑开，所以导致css背景不能显示。

2、边框不能撑开

如果父级设置了边框属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

浮动：最早期做图文排版的，让块元素同行显示，html中块元素有自己排列规则，独占一行，浮动元素会脱离文档流，一旦有浮动，就会产生问题，一定要清除浮动

清除浮动的方法：

1.给受到浮动影响的元素添加overflow:hidden - 因为overflow属性会触发 BFC

BFC: block formatting context 块级格式化上下文 - 让元素强制按照块元素的规则进行排列。

2.在受到浮动影响的元素前面，添加一个空div，给空div添加样式：clear:both。

3.在浮动元素的父标签的伪元素选择器:after中清除浮动 - 类似于空div