浮动和如何消除浮动

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，发现浮动可以让任何盒子同一行显示，渐渐偏离主题，只有就一直用浮动进行布局

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细内幕特性

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

1.标准流父元素

2.浮动不会压住padding

3.当加了浮动之后，具有行内块的特征

4.浮动的元素总是找到最近的父级元素对齐，不会超出内边距

5.上一个元素是浮动，则顶部对齐，是标准流，则底部对齐

版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

清除浮动

人生苦短，有始有终。

好比我们的浮动，有浮动开始，则就应该有浮动结束。

为什么要清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

本来做一些文字混排效果，但是现在用于做布局，所以会出现很多问题。

准确的说，不是清除浮动，而是清除浮动后造成的印象

清除浮动本质

主要是为了解决父级元素因为子级浮动引起内部高度为0的问题

清除浮动的方法

闭合浮动，记住，清除浮动就是把浮动的盒子圈在里面，让父盒子闭合出入口，不让他们影响其他元素

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

额外标签法

w3c推荐的做法，在浮动元素的末尾添加新标签（清除浮动的样式）

优点:通俗移动，书写方便

缺点：添加了很多无意义的标签，结构化较差。 推荐的方法不接受

父级添加overflow属性方法

触发BFC的方式，可以实现清除浮动的效果。

优点：代码简介

缺点：内容增多时不会自动换行，无法显示需要溢出的元素

使用after伪元素清除浮动

：after是空元素的升级版

优点:符合闭合浮动，结构语义化正确

缺点:ie6,7不支持:after,所以使用zoom清除浮动

使用before和after双伪元素清除浮动

清除浮动：加上clear:both,使元素下移，直到两边没有浮动元素

闭合浮动：使浮动元素闭合，使父元素高度不在塌陷，这样减少了浮动带来的影响

优点：代码更加简介

缺点:ie6,7不支持:after,所以使用zoom清除浮动