-
【CSS】【浮动的滥用】 ★浮动的影响： 1.元素block块状化（砖头化） 2.破坏性造成的紧密排列特性（去空格化） （其本质还是为了实现文字环绕效果) ★滥用浮动容易造成砌砖布局，砌砖布局的问题 1.容错性比较糟，容易出问题，错位 2.这种布局需要元素固定尺寸，很难重复使用 3.低版本IE下会有很多问题查看全部
-
【CSS】【清除浮动(带来的影响) 缺陷练习】 1.用clear清除浮动(在浮动元素的底加入div且设置clear:both;)，会发生margin重叠显现 2.用BFC清除浮动(在浮动元素的父元素上加入overflow: hidden;)，则会把整个元素包起来，从而不会发生margin重叠现象查看全部
-
【CSS】【清除浮动(带来的影响)】 方法一：在底部插入clear:both 1.HTML block水平元素放置于底部 <div ...></div> 2.CSS after伪元素在底部生成 .clearfix:after{} 方法二：父元素BFC(IE8+)或haslayout(IE6/IE7) float:left/right position:absolute/fixed overflow:hidden/scroll(IE7+) display:inline-block/table-cell(IE8+) width/height/zoom:1/...(IE7/IE7) ★由于以上两个方法各有缺点所以： 权衡后的策咯 .clearfix:after{content:''; display:block; height:0; overflow:hidden; clear:both;}(IE8+) .clearfix{*zoom:1;} (IE6/IE7) 或 .fix:after{} .fix{} ★更好的方法： .clearfix:after{content:''; display:table; clear:both;}(IE8+) .clearfix{*zoom:1;} (IE6/IE7) ★切勿滥用 .clearfix只应用在包含浮动子元素的『父级元素』上查看全部
-
【CSS】【Float的特性：包裹与破坏】 1.包裹：收缩（水平方向），坚挺（高度），隔绝（与外部不相关） 具有包裹性的其他属性 display;inline-block/table-cell/.. position:absolute(近亲)/fixed/sticky overflow:hidden/scroll 2.破坏:容器被破坏（父元素高度塌陷） 具有破坏性的其他属性 display:none position:absolute(近亲)/fixed/sticky查看全部
-
受不了卖萌的声音查看全部
-
BFC、haslayout通常声明查看全部
-
浮动去空格化：因为浮动设计的初忠是为了文字环绕。为两个元素加上浮动属性后，元素之间的空格消失了，是将空格当着了普通的文本字符环绕在浮动元素后面了，只是肉眼无法看见而已。查看全部
-
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。 display: block; <----加入的这个元素转换为块级元素。 clear: both; <----清除左右两边浮动。 visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已； line-height: 0; <----行高为0； height: 0; <----高度为0； font-size:0; <----字体大小为0； } .clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。 整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。 话说回来，你这段代码真是个累赘啊，这样写不利于维护。 只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。 如： 复制代码代码如下: <div class="head clearfix"></div>查看全部
-
float最初是为了做文字环绕效果查看全部
-
清除浮动的2种方法 .clearfix:after{content:"";display:block;height:0;overflow:hidden;clear:both;} .clear:after{content:"";display:table;clear:both;}查看全部
-
浮动空格跑到了后面查看全部
-
父容器高度塌陷，宽度存在，父元素下元素上移，实现环绕查看全部
-
块级格式化上下文查看全部
-
包裹特性查看全部
-
浮动破坏性查看全部
举报
0/150
提交
取消