一、流的概念
文档流是相对于盒子模型讲的
文本流是相对于文字段落讲的
元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时,其他元素会无视它所占据了的区域,直接在它身下布局。但是文字却会认同浮动元素所占据的区域, 围绕它布局,也就是没有脱出文本流。
二、浮动
浮动的本质:用来实现并排的效果
浮动使用的要点:要浮动,并排的盒子都实现浮动
父盒子要有足够的宽度,否则子盒子会掉下去
三、浮动的顺序贴靠特性
子盒子会按顺序进行贴靠,如果没有足够的空间,则会寻找前一个兄弟元素
如下图所示:3号盒子会掉到2号盒子的下面
四、浮动的元素一定能设置宽高
浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档,一律能够设置宽度和高度,即使他是a标签或span标签
五、右浮动
六、使用浮动的注意事项
垂直显示的盒子,不要设置浮动、只有并排显示的盒子才要设置浮动
“大盒子带着小盒子跑”,一个大盒子中、又是一个小天地,内部可以继续使用浮动
div是免费的,不要节约盒子
七、BFC规范
BFC规范(Box-Formatting Context 块级格式化上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然
观察下面的例子
出现以上问题的原因
一个盒子不设置height,当内容子元素都浮动时,无法撑起自身
这个盒子没有形成BFC
解决办法
给父元素设置:position:absolute
如何创建BFC?
float的值不是none
position的值不是static或者relative
display的值是inline-block、flex、inline-flex
overflow:hidden
八、清除浮动
清除浮动:浮动一定要封闭到一个盒子中,否则会对页面后续元素产生影响
方法一:父元素添加 overflow:hidden
方法二:给后面的父盒子设置 clear:both 属性 – 会导致margin失效
方法三:使用::after 伪元素 给盒子添加最后一个子元素,并给 ::after设置 {content:“”;clear:both;displa:block;}
方法四:在两个父盒子之间隔一个携带clear:both的空盒子。
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: '';
clear: both;
display: block;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="clearfix">
<p></p>
<p></p>
</div>
<div class="clearfix">
<p></p>
<p></p>
</div>
</div>