CSS围住浮动元素的三种方法

  浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它。浮动会“扩散”到下一个清除浮动的元素处。这会引起不想要的页面布局效果。

  清除浮动的方法有三种:

    1、父元素overflow:hidden

    2、同时浮动父元素

    3、添加清除浮动元素。

  1、父元素overflow:hidden

    overflow:hidden的真正作用是防止元素被超大内容撑大。使用hidden后,元素保持其设定的高宽,超大的内容会被“剪切”掉,变为页面不可见部分。同时,overflow:hidden也能强迫父元素包围浮动子元素。

  2、同时浮动父元素

    浮动父元素后,父元素会紧紧包裹子元素(不管子元素是否浮动),这时父元素的高宽极有可能需要强制确定。由于父元素的浮动会导致父元素的后续元素也浮动,故需要在父元素的后续元素上清除浮动。

  3、添加清除浮动元素

    由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。——《CSS设计指南》

    父元素需要将非浮动元素包围起来,因此将非浮动元素做最后一个元素,同时父元素肯定将子元素包围起来。直接添加一个空白div清除浮动即可。

    不需要额外元素的写法:

技术分享
1 .clearfix:after {
2 content:".";
3 display:block;
4 height:0;
5 visibility:hidden;
6 clear:both;
7 }
View Code

 

    这三种方法的使用要因地制宜。比如,不能在下拉菜单的顶级元素上应用overflow:hidden ,否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部,而这恰恰是 overflow:hidden 所要阻止的。再比如,不能对已经靠自动外边距居中的元素使用“浮动父元素”技术,否则它就不会再居中,而是根据浮动值浮动到左边或右边了。

    

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。