网站建设-网站优化-网站推广

电脑端+手机端+微信端=数据同步管理

免费咨询热线:158-6243-4340

苏州网站建设_CSS实现使浮动元素的父元素扩展

苏州网站建设_CSS实现使浮动元素的父元素扩展

在网站的前端工作中,经常会遇到使用浮动布局的情况。
 
我们都知道,如果一个父元素内部含有的几个子元素如果浮动的话,而在浮动后其父元素会收缩,如果父元素内除了浮动元素外没有其他元素的话,父元素的高度甚至会收缩到0,从而导致页面底部的元素上移,最终破坏了页面的布局。

 
对于这种情况,有些人可能选择在浮动元素的底部加一个<br/>标签,并对这个<br/>定义clear:both;的样式定义,从而清除浮动,使浮动元素的父元素自动扩展。但这样做,又导致无效标签的使用。目前,业界最优的解决方案是使用:after伪类来实现清除浮动,从而可以使用.clear:after{content:"."; height:0; display:block; clear:both; visibility:hidden;} .clear{zoom:1;}来实现。
 
当然,这在通过 CSS 在元素之后追加 "." 并不必要,因为还需要 visibility 来隐藏掉它。通过优化,代码如下:
.clear:after{content:"020";display:block;height:0;clear:both;} .clear{zoom:1;}
其中,020 指在容器后添加空格,这样就避免使用 visibility 隐藏可视性了。
另外,不推荐使用空 div 的方法。单单为了清除浮动而在结构良好的 HTML 中插入没有语义的容器,未免有些突兀。

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。