围住浮动元素的三种方法

Posted 2020-09-17

方法一:为父元素加入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会阻止的.再比方,不能对已经靠自己主动外边距居中的元素使用"浮动父元素"技术,否则他就不会再居中.