html中的浮动

浮动，顾名思义，是使目标漂浮起来，在html中有许多的块元素，块元素之间一般情况下都不是同一行放置的，块元素有自带的换行功能，自带BUG。浮动能使的块元素飘起来，改头换面，脱离自身的属性，使得它可以和其他的块并排放置。网页的元素排版更加的方便。

浮动

网页布局中有常见的文档流和标准文档流组成，其中标准文档流有块级元素和内联元素。

改变文档元素的类型：

1.display：block；改变为块级元素

2.display：inline；变为行内元素

3.display：inline-block；变为行内块级元素

4.display：none；元素不显示或隐藏

有时候设置浮动后边框回塌陷，浮动元素脱离了标准文档流，那么清楚浮动效果就能解决这个问题

clear：left；清楚左边浮动对自身的影响

clear：right；清楚右边浮动对自身的影响

clear：both；清楚两边浮动对自身的影响

clear：none；允许浮动元素出现在两侧

有浮动就有可能出现父级塌陷的问题，解决父级塌陷的方法有四种，分别是：

1.浮动元素最后添加空div
div .clear
.clear{ clear: both; margin: 0; padding: 0;}

2.父级元素添加overflow属性
div class
.class{overflow：hidden;}

3.设置父级元素的高度
.clss｛height=“100px”｝

4.给父级元素添加伪类after
div class
.class｛
centent=“”；
display=“block”；
clear：both；
｝

以上四种都能结局父级塌陷的情况，其中浮动元素后加空的div 会形成html代码沉余；父级元素添加overflow属性设置下拉列表场景时 不能使用； 设置父级元素的高度会降低扩展性；只有父级添加伪类after没有副作用，推荐使用父级添加伪类after。

inline-bock和浮动float的区别：

display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便，位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式