-
左边头像左浮动，右边博文部分不浮动，以实现外框宽度变化时能自适应查看全部
-
左边浮动，右边display:table-cell/inline-block查看全部
-
清除浮动（具体来说：清除浮动带来的影响）的两个方法： 第一种：浮动元素的底加入div 且设置clear:both;（本题中margin-top和margin-bottom会重叠） 1.************************************************** <div > <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" > </div> <div >本文字离图片的距离是？100px+图片下那行文字的高度,即有重叠效果发生，margin-bottom和margin-top效果重在一起了。可以在例子1的父级中加border:1px solid blue;属性查看下不重叠会如何。</div> <br><br><br><br> 第二种：在浮动元素的父元素上加入overflow: hidden;（本题父元素会将整个元素包裹起来，从而不会出现塌陷和重叠显现） 2.************************************************** <div > </div> <div >本文字离图片的距离是？200px，overflow: hidden;属于BFC方式的清除，封闭，内部如何与外部无关</div>查看全部
-
<body> 1.************************************************** <div > <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" > <div >clear:both;所谓的“索道”，仅清除了环绕的影响效果(仅保持通行)，内部的声明会对外部造成影响(与外部直接接触)</div> </div> <div >本文字离图片的距离是？100px+图片下那行文字的高度,即有重叠效果发生，margin-bottom和margin-top效果重在一起了。可以在例子1的父级中加border:1px solid blue;属性查看下不重叠会如何。</div> <br><br><br><br> 2.************************************************** <div > <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" > </div> <div >本文字离图片的距离是？200px，overflow: hidden;属于BFC方式的清除，封闭，内部如何与外部无关</div> </body>查看全部
-
BFC/haslayout（应用于父元素）: 封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠， 但也有缺陷，无法使用所有浏览器。代码例子在4-2查看全部
-
父元素添加 clearfix ， 且只能用在父级子元素上 不可以滥用 .clearfix:after{content:'';display:table;clear:both;} .clearfix{*zoom:1;}(为了兼容IE6/7)查看全部
-
具有破坏性的其他小伙伴查看全部
-
具有包裹性的其他小伙伴查看全部
-
浮动就是从父元素中脱离出来查看全部
-
Float的设计初衷仅仅是：文字环绕效果查看全部
-
只能自适应尺寸查看全部
-
DOM与显示位置匹配的单侧固定的布局代码组成查看全部
-
DOM与显示位置匹配的单侧固定代码查看全部
-
2.float特性之二查看全部
-
两种方法的差异： clear：与外界还有联系，例如会产生margin重叠的效果 BFC/haslayout（应用于父元素）:封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠，但也有缺陷，无法使用所有浏览器 代码例子在4-2 [ 查看全文 ]查看全部
举报
0/150
提交
取消