-
ty查看全部
-
两侧自适应布局实现：(左侧浮动，右侧可以变更宽) float:left; width:max-width(自定义); display:table-cell(ie8); *width:auto; *display:inline-block(ie7); 备注：IE6识别*和_；IE7识别*和!important；其他浏览器识别 !important。 例子代码： .mib_head_a { float: left; margin-right: 20px; } .mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }查看全部
-
float与流体布局： 1.文字环绕 2.左浮动，右浮动，中间标题 float：left； float：right； text-align:center； 3.单侧固定（左侧固定右侧自适应） 前标签：width+float 后标签padding-left/margin-left(可实现当改变宽度时整体都随之变化) 4.DOM与显示位置匹配的单侧固定布局（右侧固定左侧自适应） 外层标签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.浮动的破坏性造成元素间紧密排列特性（去空格化） <button>button1</button> <button>button2</button> <button>button3</button> <button>button4</button> <p><input type="button" value="button" /></p> 将四个button设置float:left;后，由于文本环绕，三个 被放置后面，其本身占据空间，所以四个按钮跟下面的按钮之间有间距 如果去掉 不会有间距，因为回车不能显示也选不中 滥用浮动的问题： 1.容错性比较糟糕，容易出问题 2.这种布局需要元素固定尺寸，难以复用 3.在低版本的IE下会有很多问题查看全部
-
【清除浮动(带来的影响)】 方法一：在父元素内部插入带有clear:both;的一个空标签 clear通常应用形式 1.HTML block水平元素放置于底部 <div ...></div> 缺点：使用无意义标签 2.CSS after伪元素在底部生成 .clearfix:after{} 缺点：Ie6 7不支持 方法二：父元素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) 或 .clearfix:after{content:"";display:table;clear:table;} .clearfix{*zoom:1;} 更好的方法： .clearfix:after{content:''; display:table; clear:both;}(IE8+) .clearfix{*zoom:1;} (IE6/IE7) 切勿滥用 .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查看全部
-
Float 一、浮动的特性 1.Float的设计初衷仅仅是：文字环绕效果. 2.破坏性：父元素的高度消失（去空格化） 其他具有破坏性的兄弟元素 display: none position: absolute（近亲）/fixed/sticky 3.float包裹性（Block formatting context — "块级格式化上下文"）（砖头化） 其他具有包裹性的兄弟元素 display: inline-block/table-cell/… position: absolute（近亲）/fixed/sticky overflow: hidden/scroll 4.浮动是魔鬼：无宽度、无图片、无浮动 二、浮动带来的影响 1、浮动具有破坏性，会让父元素高度塌陷！ 2、如何解决浮动让父元素高度塌陷的bug？ 3、浮动使高度塌陷不是bug，而是标准！！ 4、浮动的原本作用仅仅是为了实现文字环绕效果！ 三、清除浮动带来的影响 1、 .clearfix:after { content: ''; display: table; clear: both; } .clearfix { *zoom: 1; }IE6/IE7 四、float的滥用 1、元素block块状化（砖头化）； 2、破坏性造成的紧密排列特性（去空格化）； 砌砖布局的问题 1、妙脆角-嘎吱脆； 2、吝啬鬼-重用废； 3、洋葱头-IE7飙泪； 五、那怎样才能借助浮动实现流体布局呢？ 1、文字环绕衍生 – 单侧固定； width+float padding-left/margin-left 2、DOM与显示位置匹配的单侧固定布局 width:100% + float padding-left/margin-left width + float + margin负值 3、高级进化 – 智能自适应尺寸 float display: table-cell IE8+ display: inline-block IE7 六、 浮动与兼容性 1、让IE7飙泪的浮动问题 含clear的浮动元素包裹不正确的问题； 浮动元素倒数2个莫名垂直间距问题； 浮动元素最后一个字符重复问题； 浮动元素楼梯排列问题； 浮动元素和文本不在同一行的问题； 合理使用浮动，且用且珍惜！查看全部
-
clearfis只能用在包含子元素的父元素上查看全部
-
清楚浮动的方法查看全部
-
于是图片从文字流中脱离出来查看全部
-
inline boxes高度线丢失查看全部
-
浮动的破坏性查看全部
-
因为高度塌陷，所以文字全部移到小孩图片的右边上查看全部
-
浮动：高度塌陷查看全部
-
浮动会让元素高度塌陷查看全部
举报
0/150
提交
取消