星空网 > 软件开发 > 网页设计

CSS清浮动

前面的话

  人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题

 

定义

  clear 清除

  值: left | right | both | none | inherit

  初始值: none

  应用于: 块级元素

  继承性: 无

left:左侧不允许存在浮动元素right:右侧不允许存在浮动元素both:左右两侧不允许存在浮动元素none:允许左右两侧存在浮动元素

  [注意]设置clear属性的元素并不能改变浮动元素,而只能改变自身

  CSS2.1引入了一个清除区域,清除区域是在元素上外边距之上增加的额外间隔,不允许任何浮动元素进入这个范围,这意味着元素设置clear属性时,它的外边距不改变

 

方法

  对于标准浏览器来说,清浮动其实就两种方法,一种是在浮动元素下面添加新元素设置clear属性;另一种是触发包含块的BFC,使其包含浮动元素。而对于IE7-浏览器,则用到其特有属性haslayout

 

【1】clear属性

  [1]<div ></div>

  <注意>并不是很适用,若包含块为<ul>,则子元素只能为<li>,则在<li>后面添加<div>元素不合适

  [2]<br >

  <注意>虽然clear属性只应用于块级元素,但在除IE7-以外的其他浏览器都可以将clear属性应用于<br>元素

  [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;}

 




原标题:CSS清浮动

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨境电商运营流程图:https://www.goluckyvip.com/tag/36588.html
跨境电商运营流程诊断再造:https://www.goluckyvip.com/tag/36589.html
搜索引擎优化:https://www.goluckyvip.com/tag/3659.html
跨境电商运营模式:https://www.goluckyvip.com/tag/36590.html
跨境电商运营培训:https://www.goluckyvip.com/tag/36591.html
跨境电商运营培训班:https://www.goluckyvip.com/tag/36592.html
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
5月贾汪好玩的地方 贾汪哪有好玩的地方:https://www.vstour.cn/a/363179.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流