围住浮动元素的三种方法

方法一:为父元素添加overflow:hidden

实际上,overflow:hidden申明的真正用途是防止包含元素被超大内容撑大.应用overflow:hidden之后,包含元素依然保持其设定的宽度,而超大的字内容则会被容器剪切掉.除此之外,overflow:hidden还有另一个作用,即它能可靠地迫使父元素包含其浮动的子元素.

方法二:同时浮动父元素

方法三:添加非浮动的清除元素

即给父元素添加一个非浮动的子元素,然后清除该子元素(即不显示).

而添加子元素又有两种方法,

①简单地在HTML标记中添加一个子元素.并给他应用clear属性.由于没有默认的样式,不会引入多余的空间占用

通常是<div style="clear:both"></div>

②给父元素添加一个类clearfix

clearfix如下:

.

.clearfix:after{
  content:".";
  display:block;
  height:0;
  visibility:hidden;
  clear:both;
}

这三种方法的使用要因地制宜.比如,不能在下拉列表的顶级元素上应用overflow:hidden.否则作为子元素的下拉菜单就不会显示了.因为下拉菜单会显示在其父元素区域的外部,而这恰恰是overflow:hidden会阻止的.再比如,不能对已经靠自动外边距居中的元素使用"浮动父元素"技术,否则他就不会再居中.