【CSS】清浮动的10种方法与利弊分析
2016-04-28 11:59
423 查看
一 、 给浮动元素的父级加高度;
分析:一般情况下,父元素的高度是由子元素来撑开,但由于子元素设置了浮动,所以会脱离文档流,父元素的高度为0,给父元素加高度,高度需要大于浮动子元素的最大高度。否则,会出现父元素包不住子元素的情况。具体效果,给父元素和子元素分别加背景色便可以看到。这里就不贴代码了。我本人并不支持这种方式,有“作假”嫌疑。
二、在浮动元素下加空标签<div class="clear"></div> ;
样式为.clear{content=""; display="block" clear:both;}
分析:这个方式可实现传统意义上的清浮动,但会造成多余的html标签,在注重提高页面性能的前进方向上,会渐渐淘汰这种写法。
三、直接给浮动父元素加 clear 样式;
样式为:.clear:after{content=""; display="block"; clear:both;}
分析:这种方式是我过去最喜欢的一种写法,既可以减少不必要的代码,也可以有效清除浮动,也比较符合W3C的语义化,但需要写clear样式。
四、给浮动父元素加浮动;
分析:采用这种方式的话,需要给父元素后 所有的容器都加浮动。否则当父元素已脱离文档流,而后面的元素却从文档最开始排列,造成后面元素被当前父元素遮挡的状况。有一些原始页面采用这种方式布局。
五、在浮动元素下 加<br clear="all"/>
分析:br本身就具有清浮动的属性,使用这个方式也可以有效清除浮动。
六、给浮动父元素加 overflow:hidden;
分析:这是我最近特别喜欢的写法,既可以实现清浮动,又可以减少多余标签带来的代码冗余。
七、给浮动父元素加 overflow:auto;
分析:这种写法与上述写法 大同小异,但如果需要父元素出现滚动条的情况,采用这个方式可以一举两得。推荐使用。
八、给浮动父元素加绝对定位 position:absolute;
分析:绝对定位的本质也是脱离文档流,对元素进行定位。与第二种方法类似,好处是,父元素需要绝对定位时,采用这个方式可以同时实现清浮动。
九、给浮动父元素加固定定位 position:fixed;
分析:与上述方式大同小异,需要根据具体情况使用。
十、给浮动父元素加 display:table;
分析:什么鬼,我也不造。总之这种方法也能实现就对了。哈哈哈。
End: 有落掉的,欢迎评论补充!
分析:一般情况下,父元素的高度是由子元素来撑开,但由于子元素设置了浮动,所以会脱离文档流,父元素的高度为0,给父元素加高度,高度需要大于浮动子元素的最大高度。否则,会出现父元素包不住子元素的情况。具体效果,给父元素和子元素分别加背景色便可以看到。这里就不贴代码了。我本人并不支持这种方式,有“作假”嫌疑。
二、在浮动元素下加空标签<div class="clear"></div> ;
样式为.clear{content=""; display="block" clear:both;}
分析:这个方式可实现传统意义上的清浮动,但会造成多余的html标签,在注重提高页面性能的前进方向上,会渐渐淘汰这种写法。
三、直接给浮动父元素加 clear 样式;
样式为:.clear:after{content=""; display="block"; clear:both;}
分析:这种方式是我过去最喜欢的一种写法,既可以减少不必要的代码,也可以有效清除浮动,也比较符合W3C的语义化,但需要写clear样式。
四、给浮动父元素加浮动;
分析:采用这种方式的话,需要给父元素后 所有的容器都加浮动。否则当父元素已脱离文档流,而后面的元素却从文档最开始排列,造成后面元素被当前父元素遮挡的状况。有一些原始页面采用这种方式布局。
五、在浮动元素下 加<br clear="all"/>
分析:br本身就具有清浮动的属性,使用这个方式也可以有效清除浮动。
六、给浮动父元素加 overflow:hidden;
分析:这是我最近特别喜欢的写法,既可以实现清浮动,又可以减少多余标签带来的代码冗余。
七、给浮动父元素加 overflow:auto;
分析:这种写法与上述写法 大同小异,但如果需要父元素出现滚动条的情况,采用这个方式可以一举两得。推荐使用。
八、给浮动父元素加绝对定位 position:absolute;
分析:绝对定位的本质也是脱离文档流,对元素进行定位。与第二种方法类似,好处是,父元素需要绝对定位时,采用这个方式可以同时实现清浮动。
九、给浮动父元素加固定定位 position:fixed;
分析:与上述方式大同小异,需要根据具体情况使用。
十、给浮动父元素加 display:table;
分析:什么鬼,我也不造。总之这种方法也能实现就对了。哈哈哈。
End: 有落掉的,欢迎评论补充!
相关文章推荐
- css自动换行
- CSS3 calc()的运用
- css图片
- 图解CSS中position属性的定位用法
- Css中position、float和clear整理
- 使用CSS的position属性控制页面布局的入门教程
- 解析CSS编写中的属性优先级问题
- 详解CSS中的伪类与伪元素及二者间的区别
- 如何解决css帧keyframes在yuicompressor下压缩问题
- CSS层级关系
- ios 找出导航栏下面的黑线(可隐藏,改变样式等)
- css新特性 box-flex/flex 弹性盒状模型
- DIV+CSS颜色边框背景等样式
- 使用 stylelint检查CSS_StyleLint
- css3和js实现重力感应(经测试,andriod4.2支持)
- CSS3新特性,兼容性,兼容方法总结
- CI 里去掉index.php 并 识别css js 文件 技巧
- 《CSS设计指南》笔记--HTML标记与文档结构
- CSS3 input 输入框蓝光特效
- 初识scss(1)