-
清除浮动更好的方法： .clearfix:after{content:'';display:table;clear:both;} .clearfix{*zoom:1;} .clearfix应用在包含浮动子元素的父级元素上查看全部
-
浮动具有破坏性。浮动的破坏性只是单纯为了实现文字环绕效果而已---因此，父容器高度塌陷根本不是bug查看全部
-
float包裹与破坏 具有包裹性的其他小伙伴： 1.display:inline-block/table-cell/... 2.position:absolute(近亲)/fixed/sticky 3.overflow:hidden/scroll 具有破坏性的其他小伙伴： 1.display:none 2.position:absolute(近亲)/fixed/sticky查看全部
-
float的设计初衷仅仅是文字环绕效果查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>浮动的原本作用-文字环绕</title> <style> .test-box { width: 600px; margin: 16px auto; line-height: 1.5; font-size: 14px; } .float-left { float: left; margin: 0 10px 5px 0; } </style> </head> <body> <div class="test-box"> <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" class="float-left"/> <p>一直有这么一个美丽的误会，说我是张含韵的忠实粉丝，因为左边这种张含韵萝莉时候的照片频繁出现在我的文章中。</p> <p>实际上，当年，我还在念大学那会儿，我就把我收藏的一些美女照片调成成固定的几个比例，专门用来做演示使用。</p> <p>分别是128像素，256像素，512像素和原图。然后，非常巧合的是，这些示例图片中序号为1的妹子，就是张含韵。因此，只要有图片演示，无论是使用了1张还是10张，张含韵小妹妹自然都会出现。久而久之，大家都认为我是张含韵的忠实粉丝。</p> <p>然而，事实是什么呢？</p> <p>事实是，尼玛我以前还真的是张含韵的忠实粉丝，上大学那会儿，唯一关注的新浪名博就是张含韵的博客。不过现在嘛，普通粉丝，普通粉丝。</p> </div> </body> </html>查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>浮动的原本作用-文字环绕</title> <style> .test-box { width: 600px; margin: 16px auto; line-height: 1.5; font-size: 14px; } .float-left { float: left; margin: 0 10px 5px 0; } </style> </head> <body> <div class="test-box"> <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg"/> <p>一直有这么一个美丽的误会，说我是张含韵的忠实粉丝，因为左边这种张含韵萝莉时候的照片频繁出现在我的文章中。</p> <p>实际上，当年，我还在念大学那会儿，我就把我收藏的一些美女照片调成成固定的几个比例，专门用来做演示使用。</p> <p>分别是128像素，256像素，512像素和原图。然后，非常巧合的是，这些示例图片中序号为1的妹子，就是张含韵。因此，只要有图片演示，无论是使用了1张还是10张，张含韵小妹妹自然都会出现。久而久之，大家都认为我是张含韵的忠实粉丝。</p> <p>然而，事实是什么呢？</p> <p>事实是，尼玛我以前还真的是张含韵的忠实粉丝，上大学那会儿，唯一关注的新浪名博就是张含韵的博客。不过现在嘛，普通粉丝，普通粉丝。</p> </div> </body> </html>http://www.imooc.com/code/2775#editor-tabs-html查看全部
-
<- 浮动属性：{横向：收缩,纵向：坚挺；整体：隔绝 }-> <!-包裹-> display:inline-block/table-cell position:absoulute/fixed overflow:hidden/scroll 〈!-破坏:元素高度塌陷，自身位置浮动-> display:none; position：absoulte/fixed查看全部
-
不明白，图片左浮动后，不是脱离文档流了吗，那下面的文字应该占据图片的位置啊，结果怎么会是文字在图片的右边了呢？查看全部
-
破坏:父级元素高度塌陷,自身位置浮动查看全部
-
收缩，坚挺，隔绝 block formatting context 块级格式化上下文查看全部
-
破坏性查看全部
-
包裹性查看全部
-
Float 在手机网站中用的好巧妙，一直没有领悟透：）查看全部
-
浮动让元素block化查看全部
-
.clearfix应该应用在包含浮动子元素的父级元素上查看全部
举报
0/150
提交
取消