2018-02-14 6页 doc 46KB 9阅读
is_321575
暂无简介
标签设置个margin-left或者padding-left看看如下: left或者其实运行结果和没有设置padding值一样的。除非padding- margin-left的值大于浮动块宽度(200px)时,我们再看看:如下: 这下可以看出来了,这就是我说“半塌陷”的原因,说是没塌陷吧,那么
元素就应该距浮动灰块250px才对,说是塌陷了吧,那 么
在没有padding-left和margin-left值的时候都应该和浮动块重叠才对。这是float的诡异处之一。 按本人的理解,其实可以这样解释这个现象,这里要引入一个自创的词:“占位空间层级”。是的,引入占位空间层级这个概念之后,针对float这 个元素,我们不妨可以这样假定:没有浮动的元素(即在文档流中的)的占位空间层级为 0,有浮动的元素(指float:left或right;不包括 none)的占位空间层级为1。这样就可以解释刚才我们的
的padding和margin值都是在层级为0的占位空间中解析的,而所有 的浮动元素由于都在同一个层级的占位空间中,所以浮动元素之间的margin和padding值的解析是和我们正常理解是一致的。至于为什 么
不和浮动块重叠,那是因为占位空间层级的分界线和文档流基线不是同一个~以下为一个简易的示意图: 清除浮动: 说了这么多浮动的东西,其实我们平时接触最多的问题,还是清除浮动的问题。当初css的发明者之所以会创造clear这个属性,就是因为 float太过诡异,与文档流的层级标准都不统一,导致很难包容float所导致的负面影响,所以只能再造一个clear属性,强制清除float带来的 后遗症。 说到这里,我很同意一为同仁说的,我们平时说的“清除浮动”准确的说应该是“清除浮动造成的影响”,真正的清除浮动应该是float:none; 说到清除浮动造成的影响,又不得不说一下Dom元素的“包裹性”,因为在我们的实际编码中,用clear来清除浮动已经很少见了。我记得很早 前,那时候清除浮动就是在需要清除浮动的元素下面加个空元素,然后样式设置为clear:left或者right或both,但在如今越来越讲究web标 准以及代码结构和语义化的时代,用空标签这种既破坏结构有没语义的方法已经显得很傻很天真了。因为经过人们不懈的实践,发现用包裹性来清除浮动造成的影响 是更好的一种方式。 其他的先不多说,先看看除了空标签清除浮动外的其他几种方式吧。 view sourceprint ? 01 /* 通过overflow的方式 */ 02 .overflow-clear{ 03 overflow:auto;/*或者 hidden,scroll,不包括visible */ 04 _height:1%; /*设置高度是为了ie6获取haslayout */ 05 } 06 /* display 的方式*/ 07 .display-clear{ 08 display:inline-block; 09 } 10 /* position的方式 */ 11 .position-clear{ 12 position:absolute; 13 } 14 /* 浮动方式 */ 15 .float-clear{ 16 float:left; /*或者right,不是none就行*/ 17 } 18 /*zoom 的方式*/ 19 .zoom-clear{ zoom:1;/* only for IE6.7 因为他们haslayout,ie8以后和标准浏览器20 都弱化了haslayout */ 21 } 22 /*after伪类+content方式*/ 23 .clearfix:after { 24 content: "."; 25 display: block; 26 height: 0; 27 clear: both; 28 visibility: hidden; 29 } 30 /* Hides from IE-mac \*/ 31 .clearfix {height: 1%;} 32 /* End hide from IE-mac */ 上面几种方式都有清除浮动影响的作用,前四种是和最后一种在ie678和其他标 准浏览器下都有效地方法,zoom因为用到了ie的haslayout,所以只在ie6/7 的内核下才有效。 随便举一例,如下: view sourceprint ?
我是文案
4