1. 浮动的基本使用
标准文档流不能实现所有效果,还需要让标签去标准化实现非标准流。让标签去标准流的方法:浮动、定位
浮动属性专门用于网页的并排布局,脱离了标准文档流,不再受元素等级的限制,既可以并排显示,又可以设置宽高。
- float: left 往左浮动
- float: right 往右浮动
2. 浮动布局:
- 所有的兄弟元素,有一个浮动,剩下的所有兄弟元素必须浮动。
- 如果浮动元素不设置宽度,不会撑满父盒子,而被内容撑满。
3. 浮动的性质
-
浮动的元素脱标:标准流元素区分行、块,浮动元素脱离标准流后既可以设置宽高又可以并排显示,不在区分行内、块级元素。
-
浮动的依次贴边:父盒子空余宽度不足,存放不下的子盒子依次向前一个兄弟贴边。
-
浮动的margin塌陷问题:浮动之后不会有标准流的margin塌陷现象,各自有各自的margin,不会再塌陷。
-
浮动元素让出标准流:浮动元素脱离了标准流,它会让后面的元素占有自己原来的位置,即脱标。
-
浮动的字围现象:同级元素中,前一元素浮动让出标准流,后面的标准流盒子中的文字围绕浮动元素显示。
4. 清除浮动影响
浮动影响
标准流的盒子,如果不设置高度,会被内容自动撑高。如果盒子内的元素浮动了,子盒子脱标后,不能撑高父盒子,会导致父盒子的高度会为0,导致父盒子兄弟标签的子盒子的浮动贴边。
<style> 浮动影响导致的问题
*{
margin: 0;
padding: 0;
}
.box, .box1 {
width: 800px;
border: 5px solid red;
}
.box {
}
.box1 {
border-color: blue;
}
.box p {
width: 80px;
height: 100px;
background: cyan;
margin: 0 5px;
float: left;
}
.bo1 p {
width: 80px;
height: 100px;
background: orange;
margin: 0 5px;
float: left;
}
</style>
<div class="box clearfix">
<p></p>
<p></p>
<p></p>
</div>
<div class="box1 clearfix">
<p></p>
<p></p>
<p></p>
</div>
- clear: left 清除前面左浮动的影响
- clear: right 清除前面右浮动的影响
- clear: both 清除前面所有浮动影响
解决方法
-
利用内墙法解决:利用clear和height属性,制作一堵墙,将墙放在两个受浮动影响的父元素内的最后。
<style> .cl { clear: both; } </style> <div class="box1"> <p></p> <p></p> <p></p> <div class="cl"></div> </div> <div class="box2"> <p></p> <p></p> <p></p> <div class="cl"></div> </div>
-
利用伪类法解决:
<style> .clearfix::after{ content: ''; visibility: hidden; display: block; height: 0; clear: both; } </style> <div class="box1 clearfix"> <p></p> <p></p> <p></p> </div> <div class="box2 clearfix"> <p></p> <p></p> <p></p> </div>
-
利用overflow属性解决:overflow属性有BFC特性,BFC有一特点,即使该标签能被内部元素撑高。
<style> .box1 { overflow: hidden; } .box2 { overflow: hidden; } </style>
实际开发中,使用内墙法、overflow属性
解决浮动影响。