HTML+CSS3浮动问题clear和overflow
clear和overflow在清除浮动的使用:
1.clear
首先 清除浮动的原理 ,其实 是元素留出足够多的 垂直外边距 给浮动的元素。
代码如下:
<div > <div style="float:left"></div> </div>
这个效果 是 外层div不会包含内层div。因为浮动的元素 脱离了原始文档流。
以上面这个为例:一般而言 ,有三种方式清除浮动。
第一:让外层元素也浮动,例如:
代码如下:
<div style="float:left" > <div style="float:left"></div> </div>
然后 再此元素之外 的元素上添加clear:both效果。
第二:给外层div的末尾添加一个元素,并利用此元素清楚浮动。
具体用法:
代码如下:
<div style="clearfix" > <div style="float:left"></div> </div>
.clearfix:atfer{ content:"."; display:block; visibility:hidden; height:0; clear:both; } .clearfix{display:inline-block} .clearfix{display:block}
其中后面的两个 是为了兼容其他浏览器设置的。因为:after不是所有浏览器都支持的。
第三:利用 overflow属性
代码如下:
<div style="overflow:hidden" > <div style="float:left"></div> </div>
第四:两个相互不包含的元素,清除后面一个元素的浮动。
<div class="box">...</div> <section class="after-box">...</section>
清除浮动前
.box { float: left; width: 200px; height: 100px; margin: 1em; }
清除浮动后
.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
2.overflow
div标签里面有一张图片,但是比div还要高,这样图片就会把超出的地方浮动到div外面,为了不让图片的超出部分浮动到div外面,使用overflow来清除浮动,原始如下图:
<style type="text/css"> body{ margin: 0;padding: 0; } div{ border:5px solid red; } img { float: right; } .clearfix { overflow: auto; /*zoom: 1;//支持IE6兼容*/ } </style>
<div class="clearfix"> 不......这个图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面! <img src="http://img.aipaike.com//group1/M00/0C/79/Cvv7ZVdyJneANc73AAO5i6uQbvA283_300x300.jpg"> </div>
正常浮动后如下图:
Jocsonme
Good Day !
Good good study, day day up !
Related Posts
分类目录
- Apache (6)
- APP-Android (1)
- APP-IOS (3)
- BI (2)
- Qlikview (2)
- BigData (2)
- Domain-Space (1)
- Git (4)
- Google (1)
- History – Articles (2)
- HTML+CSS (13)
- IDE-CodeEditor (1)
- NetBeans (1)
- Javascript (18)
- Linux (24)
- Load-Balancing (3)
- Memcached (1)
- MySQL (9)
- PHP (28)
- Laravel (1)
- Swoole (1)
- Symfony2.x – 3.x (2)
- ThinkPHP5 (1)
- Thirdpart – develop (6)
- ZendFramework2.x (1)
- Products-Design (1)
- Redis (1)
- SEM (2)
- SEO (2)
- Server-Architecture (5)
- Vagrant (1)
- Windows (7)
- BAT (1)
- Workplace (1)
一 | 二 | 三 | 四 | 五 | 六 | 日 |
---|---|---|---|---|---|---|
« 11月 | ||||||
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
Remarkable issues here. I’m very happy to look your post.
Thank you so much and I am having a look forward to contact you.
Will you kindly drop me a mail?
Hello! What’s your Email?