-
float与流体布局： 1.文字环绕 2.float：left； float：right； text-align:center；左浮动，右浮动，中间标题； 3.单侧固定（左侧固定右侧自适应） 前div：width+float 后div:padding-left/margin-left(可实现当改变宽度时整体都随之变化) 4.DOM与显示位置匹配的单侧固定布局（右侧固定左侧自适应,就是代码顺序与显示效果一致） /*右浮动，改变DOM位置的流体布局写法*/ 头像divA { width： ；float：right；} 自适应divB{ margin-right：；} /*左浮动，不改变DOM位置的流体布局写法*/ 外层divA设置width:100%+float, 内层divB设置padding-left/margin-left（放在自适应div的外侧，也就是A的外侧）； 然后与A同级的标签C设置width+float+margin负值，负值大小等于width值的大小）；（A为自适应，c为固定） 5.智能自适应（左右宽度均为自适应，不用设定） 一侧元素设置float,另一侧元素针对IE8以上浏览器（或其他现代浏览器）设置display:table-cell，针对IE7设置display:inline-block查看全部
-
style 标准的样式！可能是由style属性指定的！ runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！ currentStyle 指 style 和 runtimeStyle 的结合！ 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE） 要兼容FF，就得需要getComputedStyle查看全部
-
浮动的两大特性（使得浮动非常适合砌砖头）高度加浮动会使元素像砖头一样拼砌起来“网格化”： 1 元素的block化（砖头化） 2 破坏性造成的紧密排列的特性（去空格化）（ 是字符，去空格化只不过是将字符环绕于float属性元素的体现，将所有的空格挤到了浮动元素身后，会占有空间，而用回车的话是不占用空间的） 滥用浮动的问题： 1.容错性比较糟糕，容易出问题； 2.这种布局需要元素固定尺寸，难以复用； 3.在低版本的IE下会有很多问题。 还是借助浮动实现流体布局是其本质用法 怎么通过浮动实现流体布局？参见下一节查看全部
-
"Non-Breaking Space"的缩写，在HTML中：  ；表示一个“空格”查看全部
-
用clear清除浮动，会发生margin重叠显现，而BFC清除浮动，则会把整个元素包起来，从而不会发生margin重叠现象 1、子元素内部clear:both; （浮动元素的底加入div且设置clear:both） 2、父元素内部overflow:hidden;（在浮动元素的父元素上加入overflow: hidden） <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）查看全部
-
清除浮动的better idea查看全部
-
清除浮动：（只是清除浮动带来的影响，浮动一直存在） 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应用在包含浮动子元素的父级元素上查看全部
-
方法差异 1.clear 仍与外界接触，会有margin重叠 2.bfc/haslayout 完全封闭，不会有margin重叠查看全部
-
清除浮动（准确说法是：清除浮动带来的影响）查看全部
-
浮动使父元素高度塌陷是标准，当父元素高度塌陷后，置于父元素下的元素没有限制会在空间允许的条件下浮动上来，这就是文字环绕图片的原因；或者是图片位于文字之间，图片的浮动会使其突破父元素向左或右浮动后文字拼接呈环绕效果（浮动的破坏性只是为了实现文字环绕效果）查看全部
-
父容器高度塌陷不是bug查看全部
-
图片加入 float：left；属性后，注意其注释查看全部
-
float特性包裹与破坏 包裹： 1收缩：水平方向使其宽度收缩 2坚挺：竖直方向 3隔绝：里面的东西发生的任何事情对外面没有任何影响（bfc block formatting context:块级格式化上下文） 具有包裹性的其他小伙伴： 1. display: inline-block/table-cell/... 2. position: absolute（近亲）/fixed/sticky 3. overflow: hidden/scroll 破坏（父级元素高度被破坏，高度塌陷）（浮动是魔鬼） 其他具有破坏性的元素 1. display: none 2. position: absolute（近亲）/fixed/sticky查看全部
-
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查看全部
-
float 设计的初衷是为了实现文字环绕效果（文字环绕图片），明白设计初衷就可以明白float的特有行为表现查看全部
举报
0/150
提交
取消