> 웹 프론트엔드 > HTML 튜토리얼 > div+css之清除浮动_html/css_WEB-ITnose

div+css之清除浮动_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:30:32
원래의
1256명이 탐색했습니다.

当元素有浮动属性时,会对其父元素或后面的元素产生影响,
会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响。

浮动的清理(clear):

值:
none:默认值。允许两边都可以有浮动对象;
left:不允许左边有浮动对象;
right:不允许右边有浮动对象;
both:左右两侧不允许有浮动对象。

清除浮动的方法:
1.额外标签法
这种方法应该是最简单的一种了,w3c建议在容器的末尾增加一个“clear:both"的元素
强迫容器适应它的高度以便装下所有的float元素。


  

  
  


.clear{clear:both;}

2.父元素添加overflow:hidden;
注:如果子元素使用了定位布局,就会很难实现。

3.利用伪对象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高度自适应问题。

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿