CSS清浮动_html/css_WEB-ITnose
前面的话
人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题
定义
clear 清除
值: left | right | both | none | inherit
初始值: none
应用于: 块级元素
继承性: 无
left:左侧不允许存在浮动元素right:右侧不允许存在浮动元素both:左右两侧不允许存在浮动元素none:允许左右两侧存在浮动元素
[注意]设置clear属性的元素并不能改变浮动元素,而只能改变自身
CSS2.1引入了一个清除区域,清除区域是在元素上外边距之上增加的额外间隔,不允许任何浮动元素进入这个范围,这意味着元素设置clear属性时,它的外边距不改变
方法
对于标准浏览器来说,清浮动其实就两种方法,一种是在浮动元素下面添加新元素设置clear属性;另一种是触发包含块的BFC,使其包含浮动元素。而对于IE7-浏览器,则用到其特有属性haslayout
【1】clear属性
[1]
并不是很适用,若包含块为
- ,则子元素只能为
- ,则在
- 后面添加元素不合适
[2]
虽然clear属性只应用于块级元素,但在除IE7-以外的其他浏览器都可以将clear属性应用于
元素[3]为浮动元素的after伪元素设置clear属性
.clear:after{content:""; display: block; clear: both;}
IE7-浏览器不支持after伪元素
【2】BFC
[1]float: left/right
[2]position:absolute/fixed
[3]display:inline-block/table-cell/table-caption/flex
[4]overflow:hidden/scroll/auto
关于BFC的详细信息移步至此
【3】IE7-
关于IE7-浏览器有一个其特有的属性haslayout,当触发包含块的haslayout时,浮动元素被layout元素自动包含
[1]display:inline-block
[2]height/width:除auto外
[3]float: left/right
[4]position: absolute
[5]writing-mode: tb-rl
[6]zoom: 除normal外
关于haslayout的详细信息移步至此
兼容
在所有浏览器中都兼容的清浮动方案如下:
.clear:after{content:""; display: block; clear: both;}.clear{zoom: 1;}
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
推荐阅读
-
多个
- 左浮动以后出现的问题,求高手_html/css_WEB-ITnose
-
IFrame 框架的用法简介_html/css_WEB-ITnose
-
CSS 有关margin padding_html/css_WEB-ITnose
-
懒人的诉求:有没有支持CSS文件的可视化的页面开发工具?_html/css_WEB-ITnose
-
手机端分类页面的效果图实现_html/css_WEB-ITnose
-
Codeforces Round #281 (Div. 2)_html/css_WEB-ITnose
-
能否实现对特定字符设置样式?_html/css_WEB-ITnose
-
HTML与CSS布局技巧总结_html/css_WEB-ITnose
-
CSS实现背景透明,文字不透明(各浏览器兼容)_html/css_WEB-ITnose
-
如何让整个div实现超链接(得用标签)_html/css_WEB-ITnose