一、问题描述
web网页设计中,在div元素中有时候常伴有图文结合的post组件。为了使得文本在图像周围环绕,那么需要对图像区域使用float浮动。如果不做清除浮动,则会出现如下结果:
图像比文本高,且图像脱离并超出了父级元素的文档流。
源码:
<!DOCTYPE html> <html> <head> <title>float demo span(block;clear;height)</title> </style> </head> <body> <div style="/* 300px;*//*height: 200px;*/padding:10px;border: 1px solid red;background-color: yellow;font-size: "> <div class="photo" style="border: 1px solid black;padding:15px;float: left"> <img src="test.jpg" style=""> </div> <section style="display: block;background-color: white;padding: 1px;"> <h3>肖像摄影</h3> <p> 眼神锋利,嘴里叼着烟的画家;神情严肃,姿态自信的泥瓦匠;笑容憨厚,略有些拘谨的拳击手...... 600 多张不同年龄、职业的德国人的肖像,充满个性,又有着一脉相承的直率和倔强。这些作品来自一位以拍摄肖像而著名的德国摄影师——奥古斯特·桑德(August Sander,1876-1964)。 </p> </section> </div> </body> </html>
原因分析:
此处的div父级元素只能识别出子元素文本部分的高度,而图像比文本更高,所以高出部分就露出来了。那么,为了使得图像不超出母元素的高度,就必须进行float的浮动清除。
二、解决方案一
源码:在父级元素内的末尾处加上span[display:block;height:0;clear:both]
<span style="display: block;clear: left;padding: 15px;background-color: red;"></span>
解释:在浮动元素的后面兄弟元素(一般是末尾元素)中,加入span元素(display:block,clear:left(or right(根据浮动方向来))):
原因:块级元素(display:block)要独占一块文档流(且独立一行),再清除一下前面浮动兄弟元素的浮动方向的浮动,那本来应该浮动的span清除浮动后,自然要独占一行了(去掉padding后,对整体文档无影响)。
效果:
缺点:蛮力【需要强行加入span并添加其样式】:增加工作量;不利于页面优化
二、解决方案二【推荐】
源码:为div父级元素,设置公用类.clearfix
.clearfix:after {
overflow: auto;
display: block;
clear: both;
content: attr(data-sort); /* 一般为 ‘ ’,此处为做测试 */
visibility: hidden;
height:0; /*使得不占据文档流*/
}
/* .clearfix:before{
overflow: auto;
display: block;
clear: both;
content: ' ';
visibility: hidden;
height:0;
}*/
解释:略(见源码仔细领会)
效果:
优点:
组件化设计的思想,可以大面积公用;提高生产效率,也有利于页面优化
三、参考文档:
1.《网络设计的原理》|桧山佐知子:防止使用float时版面被破坏
2.图文来源:蜂鸟网:http://image.fengniao.com/534/5345869.html