-
【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只应用在包含浮动子元素的『父级元素』上查看全部
-
float: 浮动历史:得到图文混排的效果. 浮动的两个特性: 1.破坏:父级元素高度塌陷,自身位置浮动 2.包裹:收缩,坚挺,隔绝 这个特性也就是BFC【BFC block formatting context 块级格式化上下文】 为什么要清除浮动: 解决父元素高度塌陷: 只用在浮动元素的父元素上,不浮动不用查看全部
-
IE7浮动问题查看全部
-
一侧固定，一侧自适应布局的两种方法查看全部
-
两种实现方法查看全部
-
左侧固定，右侧自适应查看全部
-
文字环绕衍生--单侧固定查看全部
-
mark查看全部
-
float块元素布局的问题 1.容错性比较糟糕，容易出问题 2.这种布局需要元素固定尺寸，很难重复使用 3.在低版本的IE下会有很多问题查看全部
-
使用浮动后特性查看全部
-
<!doctype html> <html> <head> <meta charset="utf-8"> <title>clear与margin重叠</title> </head> <body> 1. <div > <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" > <div >clear:both;</div> </div> <div >本文字离图片的距离是？</div> <br><br><br><br>2. <div > <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" > </div> <div >本文字离图片的距离是？</div> </body> </html>查看全部
-
智能自适应尺寸查看全部
-
DOM与显示位置一致的流体布局查看全部
-
单侧浮动流体布局查看全部
-
清除浮动最佳方法查看全部
举报
0/150
提交
取消