-
清除浮动的代码(只用在浮动元素的父级元素上，不得滥用！) .clearfix:after{content:"";display:block;height:0;overflow:hidden;clear:both;} .clearfix{*zoom:1} 更好的方法： clearfix:after{content:''; display：table； clear：both； } after伪元素用的是IE8以上的浏览器 IE6，7用的是*zoom:1 两种方法的差异： clear：与外界还有联系，例如会产生margin重叠的效果 BFC/haslayout（应用于父元素）:封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠，但也有缺陷，无法使用所有浏览器查看全部
-
浮动使父元素高度塌陷，不是bug而是标准！！ 浮动的原本作用仅仅是为了实现文字环绕效果。 浮动使父元素高度塌陷是标准，当父元素高度塌陷后，置于父元素下的元素没有限制会在空间允许的条件下浮动上来，这就是文字环绕图片的原因；或者是图片位于文字之间，图片的浮动会使其突破父元素向左或右浮动后文字拼接呈环绕效果（浮动的破坏性只是为了实现文字环绕效果）查看全部
-
清除浮动有两种方法： 1、用clear清除浮动：浮动元素底部加入 <div> + clear:both 样式； 会发生margin重叠显现。 原因：外部元素会对内部元素产生影响，图片的bottom是针对下一个div的上部为标准，所以上移100px，而发生重叠。 2、用BFC清除浮动：浮动元素的父元素 + overflow:hidden 样式； 父元素会将整个元素包裹起来，从而不会出现塌陷和重叠显现。 原因：内部元素被包裹起来不会受到干扰，图片的bottom就是父元素的bottom，所以上移100px;查看全部
-
主讲语气好二。。查看全部
-
浮动核心代码： 左侧div: float: left; 右侧div: display: table-cell; width: 9999px; <---没错width就是 9999px 记得清除浮动 .clearfix {*zoom: 1;} .clearfix:after {content: ''; display: table; clear: both;} 详细原理参考老师博客 http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/查看全部
-
两种方法的差异： clear：与外界还有联系，例如会产生margin重叠的效果 BFC/haslayout（应用于父元素）:封闭，里面的声明不会对外界产生影响，例如float不会出现margin重叠，但也有缺陷，无法使用所有浏览器 代码例子在4-2查看全部
-
清除浮动（具体来说：清除浮动带来的影响）的两个方法： 第一种：浮动元素的底加入div 且设置clear:both;（本题中margin-top和margin-bottom会重叠） 第二种：在浮动元素的父元素上加入overflow: hidden;（本题父元素会将整个元素包裹起来，从而不会出现塌陷和重叠显现）查看全部
-
给第一个div加了边框以后也能触发BFC查看全部
-
flat的设计初衷是为了实现文字环绕效果查看全部
-
1浮动可以让元素block化 2浮动的去空格化,造成紧密排列查看全部
-
清除浮动（具体来说：清除浮动带来的影响）的两个方法： 第一种：浮动元素的底加入div 且设置clear:both;（本题中margin-top和margin-bottom会重叠） 第二种：在浮动元素的父元素上加入overflow: hidden;（本题父元素会将整个元素包裹起来，从而不会出现塌陷和重叠显现）查看全部
-
清除浮动有两种方法： 1、用clear清除浮动：浮动元素底部加入 <div> + clear:both 样式； 会发生margin重叠显现。 原因：外部元素会对内部元素产生影响，图片的bottom是针对下一个div的上部为标准，所以上移100px，而发生重叠。 2、用BFC清除浮动：浮动元素的父元素 + overflow:hidden 样式； 父元素会将整个元素包裹起来，从而不会出现塌陷和重叠显现。 原因：内部元素被包裹起来不会受到干扰，图片的bottom就是父元素的bottom，所以上移100px;查看全部
-
https://www.google.com/search?q=BFC&oq=BFC&aqs=chrome..69i57&sourceid=chrome&ie=UTF-8#safe=active&q=BFC+css ## Block formatting context查看全部
-
两侧自适应布局实现：(左侧浮动，右侧可以变更宽) 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; }查看全部
-
改变代码DOM结构的方法：头像float+文字margin。 不改变代码DOM位置的方法：文字float+（头像float+负margin）查看全部
举报
0/150
提交
取消