-
清楚浮动带来的影响，浮动是一直存在的
一：脚底插入clear:both;（与外接触）
二：父元素BFC（IE8+)或haslayout(IE6/IE7)(不与外界接触）
clear通常应用形式
HTML block水平元素底部走起<div>...</div>
CSSafter伪元素底部生成 .clearfix:after{}
切勿滥用
.clearfix应用在包含浮动子元素的父级元素上
查看全部 -
浮动的破坏性只是单纯为了实现文字环绕效果而已，因此，父容器高度塌陷根本不是BUG，特性使然
查看全部 -
float特性之包裹：
收缩
坚挺
隔绝（块级格式化上下文BFC）
之破坏：容器被破坏
查看全部 -
清除浮动在父元素上添加:after{content:"";display:table-cell;clear:both;}
查看全部 -
class="float-left" 实现文字环绕，浮动的原本作用。
查看全部 -
浮动是为了实现文字的环绕效果，但是浮动会破坏父元素的高度，使父元素的高度塌陷，这才使得其他元素可以环绕在周围
查看全部 -
设置float后会去掉空格，原因是float的文字环绕特性，换行符被当成了文字查看全部
-
IE7的问题查看全部
-
三无查看全部
-
子元素使用浮动，会使父元素高度塌陷（浮动元素脱离原始文本流，不占空间，父级对象盒子无法撑开），就产生浮动的效果。
clearfix清楚浮动更好的方式 .clearfix:after{ content:''; display:table; clear:both; }
查看全部 -
浮动与流体布局：
查看全部 -
浮动与两侧自适应的流体布局
div1{float:left;margin-right:20px;}
div2{
display:table-cell;
width:400px;
}
查看全部 -
子元素使用浮动，会使父元素高度塌陷（浮动元素脱离原始文本流，不占空间，父级对象盒子无法撑开），就产生浮动的效果。
浮动产生的副作用：
1、背景不能显示（颜色、图片）
2、边框不能撑开
3、margin、padding不能显示（特别是上下边）
不清除浮动时的效果：
https://img1.sycdn.imooc.com//5c6e261b0001a71508750646.jpg
清除浮动的方法：
1.为父级元素设置确定的高（计算好内容高度）
2.clear:both清除浮动
3.父级div定义 overflow:hidden（对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。）
overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。
查看全部 -
具有破坏行：
display: none
position: absolute /fixed / sticky
查看全部 -
具有包裹性：
display: inline-block / table-cell
position: absolute / fixed /sticky
overflow: hidden /scroll
查看全部
举报