-
何时用，正确的用查看全部
-
何时用，正确的用查看全部
-
处理方法，兼容处理查看全部
-
问题查看全部
-
2个方法查看全部
-
由来查看全部
-
<img class="float-left" src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg"/>查看全部
-
float设计初衷：实现文字环绕效果！查看全部
-
IE7浏览器下的浮动问题查看全部
-
float与流体布局： 1.文字环绕 2.float：left； float：right； text-align:center；左浮动，右浮动，中间标题； 3单侧固定（左侧固定右侧自适应） 前标签：width+float 后标签padding-left/margin-left(可实现当改变宽度时整体都随之变化) 4DOM与显示位置匹配的单侧固定布局（右侧固定左侧自适应） 外层标签A设置width:100%+float,内层标签B设置padding-left/margin-left；然后与A同级的标签C设置width+float+margin负值，负值大小等于width值的大小）；（A为自适应，c为固定） 5智能自适应（左右宽度均为自适应，不用设定） 一侧元素设置float,另一侧元素针对IE8以上浏览器（或其他现代浏览器）设置display:table-cell，针对IE7设置display:inline-block （float会使元素高度宽度自适应）查看全部
-
浮动的两大特性（使得浮动非常适合砌砖头）高度加浮动会使元素像砖头一样拼砌起来“网格化”： 1 元素的block化（砖头化） 2 破坏性造成的紧密排列的特性（去空格化）（ 是字符，去空格化只不过是将字符环绕于float属性元素的体现，将所有的空格挤到了浮动元素身后，会占有空间，而用回车的话是不占用空间的） 滥用浮动的问题： 1.容错性比较糟糕，容易出问题； 2.这种布局需要元素固定尺寸，难以复用； 3.在低版本的IE下会有很多问题。 还是借助浮动实现流体布局是其本质用法查看全部
-
用clear清除浮动，会发生margin重叠显现，而BFC清除浮动，则会把整个元素包起来，从而不会发生margin重叠现象 <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" > <div >clear:both;</div>(消除图片浮动影响的元素处设置clear：both) </div> <div >本文字离图片的距离是？</div>（距离为100px发生了margin重叠显现） <div >(bfc将元素包起来，不会发生margin重叠显现) <img src="http://img1.sycdn.imooc.com//53d60af3000171a002560191.jpg" > </div> <div >本文字离图片的距离是？</div>（距离为200px）查看全部
-
清除浮动：（只是清除浮动带来的影响，浮动一直存在） 1父元素底部插入一个设置了clear:both的属性的元素； （1）html block水平元素底部<div ...></div> (2)css after伪元素底部生成 .clearfix:after{} IE8以上： .clearfix:after{content:"";display:block;height:0px;overflow:fidden;clear:both} IE6/7 .clearfix{*zoom:1;} 2bfc/haslayout通常声明： float:left/right position:absolute/fixed overflow:hidden/scroll(ie7+) display:inline-block/table-cell(ie8+) width/height/zoom:1/...(ie6/ie7)(zoom:1是可以haslayout但不会影响表现的神器) 缺点：不能声明一次应用于所有元素但zoom1是特例；大多浏览器不兼容。 综上：IE8以上： .clearfix:after{content:"";display:block;height:0px;overflow:fidden;clear:both} IE6/7（若用display：table，则可省略height，overflow的声明） .clearfix{*zoom:1;}。 .clearfix应用在包含浮动子元素的父级元素上查看全部
-
浮动使父元素高度塌陷是标准，当父元素高度塌陷后，置于父元素下的元素没有限制会在空间允许的条件下浮动上来，这就是文字环绕图片的原因；或者是图片位于文字之间，图片的浮动会使其突破父元素向左或右浮动后文字拼接呈环绕效果（浮动的破坏性只是为了实现文字环绕效果）查看全部
-
float特性包裹与破坏 包裹：1收缩：水平方向使其宽度收缩 2坚挺：竖直方向 3隔绝：里面的东西发生的任何事情对外面没有任何影响（bfc:块级格式化上下文） 具有包裹性的其他小伙伴： 1. display: inline-block/table-cell/... 2. position: absolute（近亲）/fixed/sticky 3. overflow: hidden/scroll 破坏（父级元素高度被破坏，高度塌陷）（浮动是魔鬼） 1. display: none 2. position: absolute（近亲）/fixed/sticky查看全部
举报
0/150
提交
取消