DIV+CSS之清除浮动总结
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响。
浮动的清理(clear):
值:
none:默认值。允许两边都可以有浮动对象;
left:不允许左边有浮动对象;
right:不允许右边有浮动对象;
both:左右两侧不允许有浮动对象。
清除浮动的方法:
第一种:额外标签法
这种方法应该是最简单的一种了,w3c建议在容器的末尾增加一个“clear:both"的元素
强迫容器适应它的高度以便装下所有的float元素。
<div id="main">
<div id="left"></div>
<div id="right"></div>
<div class="clear"></div>
</div>
<div id="footer"></div>
.clear{clear:both;}
第二种:父元素添加overflow:hidden;
注:如果子元素使用了定位布局,就会很难实现。
第三种:利用伪对象after方法
定义一个类,使用伪对象after,控制浮动元素的影响。网上最流行的清除浮动代码:
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:'';
}
.clearFix{zoom:1;} /*解决ie6/7兼容问题*/
css溢出的使用
设置对象的内容超过其指定高度及宽度时,如何管理内容。
overflow:visible【默认值,不剪切内容也不添加滚动条】
auto【在必需时,对象内容才会被剪切或添加滚动条】
hidden【不显示超过对象尺寸的内容】
scroll【总是显示滚动条】
zoom属性:只有ie内核的浏览器支持,缩放比例。
设置或检索对象的缩放比例。
语法:normal【默认值,使用对象的实际尺寸】;number【百分数|无符号浮点实数。浮点实数
为1.0或百分数为100%时相当于此属性的normal值
zoom:1解决ie6高度自适应问题。
每天进步一点点。
最新评论:
no.118798 nameg4 178.159.37.69 2020-12-31 13:33
no.118559 name7y 178.159.37.69 2020-12-29 13:21
no.118481 namem5 178.159.37.69 2020-12-28 19:53
no.118472 name1u 178.159.37.69 2020-12-27 18:06
no.118290 namebi 178.159.37.69 2020-12-26 08:06
no.118186 cbd01 178.159.37.69 2020-07-28 06:09
no.118177 cbdkf 178.159.37.69 2020-07-27 21:18
no.118157 cbdho 178.159.37.69 2020-07-26 01:29
no.118151 cbdhc 178.159.37.69 2020-07-25 10:11
no.118146 cbdah 178.159.37.69 2020-07-25 07:05
no.118084 cbdlc 178.159.37.69 2020-07-21 01:00
no.118074 thcv3 178.159.37.77 2020-07-20 12:23
no.118064 thc12 178.159.37.77 2020-07-20 05:05
no.118059 cbdjq 178.159.37.69 2020-07-20 01:53
no.118050 thcwo 178.159.37.77 2020-07-19 23:06
no.118049 cbdpi 178.159.37.69 2020-07-19 22:59
no.118040 thcl1 178.159.37.77 2020-07-19 20:44
no.118039 cbdzc 178.159.37.69 2020-07-19 20:43
no.118028 thc5y 178.159.37.77 2020-07-19 11:20
no.116702 olenlawlor 195.154.61.127, 2020-04-16 22:36
no.116489 ermelindalear 212.126.108.172 2020-04-06 11:02
no.116452 fidelferguson 110.74.195.64 2020-04-01 16:03
no.110953 svetochka.fomina.95 194.226.49.31 2019-10-05 17:43
no.110949 svetochka.fomina.95 194.226.49.31 2019-10-05 17:34
no.68185 rantbicobudh1975241976 178.67.147.254 2019-05-07 07:09
no.59365 lestenna 77.233.20.110 2019-04-02 13:16
no.59364 lestenna 77.233.20.110 2019-04-02 13:16
no.59363 lestenna 77.233.20.110 2019-04-02 13:15
no.59362 lestenna 77.233.20.110 2019-04-02 13:15
no.59361 lestenna 77.233.20.110 2019-04-02 13:15
no.59093 herissaq 77.233.22.85 2019-03-29 09:42
no.58979 herissaq 77.233.21.147 2019-03-28 14:30
no.58889 herissaq 77.233.21.147 2019-03-28 00:25
no.58762 herissaq 77.233.22.193 2019-03-27 04:45
no.57660 vendor.s 77.233.9.217 2019-03-20 12:41
no.57659 vendor.s 77.233.9.217 2019-03-20 12:41
no.57658 vendor.s 77.233.9.217 2019-03-20 12:41
no.57657 vendor.s 77.233.9.217 2019-03-20 12:41
no.57656 vendor.s 77.233.9.217 2019-03-20 12:41
no.57591 vendor.s 77.233.21.111 2019-03-20 03:14
no.54574 schubosuvni19732351980 89.110.16.33 2019-02-28 11:12
no.54566 schubosuvni19732351980 89.110.16.33 2019-02-28 10:30
no.51251 taratiman19701911996 178.71.201.105 2019-02-10 07:19
no.51240 taratiman19701911996 178.71.201.105 2019-02-10 06:38
no.48191 tony.coombes85 195.16.48.142 2019-01-26 00:45
no.45361 schubosuvni19732351980 89.110.9.212 2019-01-17 03:53
no.45343 dedre96 89.110.9.212 2019-01-17 02:33
no.44912 bilkyt54sp 176.108.5.7 2019-01-15 18:48
no.20608 konip2ld 176.108.5.50 2018-09-30 12:36
no.20553 kanuk4lm 176.108.5.50 2018-09-30 01:04