CSS-浮动元素

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素脱离文档流，会随着float属性值的设定向左或向右移动，直到它的边缘碰到它的包含框或浮动元素的边缘，普通文档流会视浮动元素不存在。

• 对父容器 若子元素都是浮动元素，则无法撑开父元素高度，父元素失去高度。
• 对其他浮动元素，如果包含块太窄，无法完全水平容纳浮动元素，那么其他浮动元素就会向下移动，直到有足够空间。如果浮动元素高度不同，那么向下移动时可能会被卡住。
• 对普通元素，普通元素会表现得当作浮动元素不存在一样，浮动元素可以覆盖普通元素，如果宽高合适，普通元素可以占据浮动元素原来的位置。
  对文字，文字会环绕在浮动元素周围，可以借此形成文本环绕图片的效果。

清除浮动

清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动指清除浮动带来的不利影响。当容器内有浮动元素，而容器的高度为auto，容器的高度无法自动伸长以适应内容的高度，这样内容就会溢出到容器外，破坏布局。为了防止这个现象的出现而进行的处理就是清除浮动。

• 使用:after伪元素，结合:after伪元素和触发hasLayout可以兼容各大主流浏览器。具体操作为给浮动元素的容器添加一个class，然后给class添加:after伪元素实现元素末尾添加一个看不见的块元素
  

  
  

• 使用overflow属性给浮动元素的容器添加overflow:hidden或overflow:auto,另外在IE6中还需触发hasLayout，例如添加zoom:1.