-
破坏查看全部
-
左浮动，不改变DOM位置的流体布局写法，核心代码是 左侧div: width: 100%; float: left; 右侧div: width: 56px; float: left; margin-left: -56px; <--- 此处的 margin-left，等于右侧 div 自身的宽度 width: 56px查看全部
-
display:table-cell会触发BFC,作用是清除浮动影响 *号的作用是用于IE6/7的浏览器 浮动与两侧皆自适应的流体布局，核心代码 左侧div: float: left; 右侧div: display: table-cell; width: 9999px; <---没错width就是 9999px 记得清除浮动 .clearfix {*zoom: 1;} .clearfix:after {content: ''; display: table; clear: both;}查看全部
-
两侧自适应布局实现：(左侧浮动，右侧可以变更宽) 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:高级进化，智能自适应尺寸 display:table-cell IE8+ 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） display:inline-block IE7查看全部
-
float砌砖布局的问题 1、容错性比较糟糕，容易出问题 2、这种布局需要元素固定尺寸，很难重复使用 3、在低版本的IE下会有很多问题 1.浮动会使元素块状话 2.浮动会破坏性炒成紧密排列特性（去空格化，空格和换行本身也是字符便跑到了后面）查看全部
-
overflow：hidden会使元素BFC化，div内任何元素无论怎么折腾都是在内部，不会影响div外面的元素。 设定overflow就类似于设定了一个下边框，这时的margin-bottom是相对于容器来说的，不会发生margin重叠查看全部
-
比较好的方法： .clearfix:after{content:'';display:table;clear:both;} .clearfix{*zoom:1;} 其他用法如下查看全部
-
【CSS】【清除浮动(带来的影响)】 方法一：在底部插入clear:both 1.HTML block水平元素放置于底部 <div ...></div> 2.CSS after伪元素在底部生成 .clearfix:after{} 方法二：父元素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) 或 .fix:after{} .fix{} 更好的方法： .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最初是为了做文字环绕效果查看全部
-
clearfix:after查看全部
-
clearfix策略查看全部
-
少使用浮动实现布局查看全部
-
float布局的问题查看全部
举报
0/150
提交
取消