浮动
浮动是为了元素标签的并排显示问题。
我们在浏览网页的时候，经常会看到 几个 div 块是可以并排显示的， 浮动就是解决这样问题的方法之一。
float属性有以下的值
- float: left; 左浮动
- float: right 右浮动
浮动的特点
- 浮动主要针对的是并排显示的盒子而言。
- 在一个父容器的盒子里， 兄弟元素之间要浮动必须都浮动。
- 父容器必须要有一个足够的宽度，否则不足以使得各个子元素之间并排展示。
- 一个父容器的盒子内，兄弟元素会按照顺序贴靠，如果是左浮动，就往左贴合；如果是右浮动，就往右贴合。如果发现贴合的盒子后没有足够的空间，则会在寻找前一个兄弟元素进行贴靠。直到空间合适为止。
- 浮动的元素已经脱离了标准的HTML文档流，不再区分块级元素、行内元素并且一律能设置宽度和高度，即使它是span标签或者a标签
一个浮动的例子
<!--一个浮动的例子-->
<style>
.box1 {
width: 600px;
height: 200px;
border: 1px solid #000;
}
.box1 .con1 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box1 .con2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box1 .con3 {
width: 201px;
height: 200px;
background-color: yellowgreen;
float: left;
}
</style>
<div class="box1">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</div>
<!--一个span标签也能浮动的例子-->
<style>
span {
float: left;
height: 50px;
width: 200px;
margin-left: 20px;
background-color: orange;
}
</style>
<span>1</span>
<span>2</span>
<span>3</span>
一个顺序贴靠的例子
<!-- 一个顺序贴靠的例 子-->
<!-- 以下代码中 兄弟元素 con1， con2， con3 之间会进行顺序贴靠-->
<!-- con3 在贴靠 con2 的时候，发现父容器的宽度只能是400px, 分别被con1 和 con2 占据， 所以con3 会找 cont1 贴靠，最终con3 位于 con1右边， con2下边 -->
<style>
.box1 {
width: 400px;
height: 200px;
border: 1px solid #000;
}
.box1 .con1 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box1 .con2 {
width: 200px;
height: 100px;
background-color: blue;
float: left;
}
.box1 .con3 {
width: 200px;
height: 100px;
background-color: yellowgreen;
float: left;
}
</style>
<div class="box1">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</div>
清除浮动
清除浮动是为了 不影响设置浮动标签的后续的标签的布局展示。
因为，在一个父容器中，子元素浮动了，脱离了标准文档流，不在占用之前的位置，会导致 无法撑开没有设置高度的父元素；从而导致后续的结构挤压，造成整个页面布局的混乱。
-
给父元素加个高度。在那些明确知道父容器高度的情况下，可以使用。
<style> * { margin: 0; padding: 0; } div { height: 100px; } p { float: left; width: 100px; height: 100px; margin-right: 20px; background-color: red; } </style> <body> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> <p></p> </div> </body> -
后续元素增加 clear:both ,清除前面元素对自己的影响。
<style> * { margin: 0; padding: 0; } .box2 { margin-top: 20px; clear: both; } p { float: left; width: 100px; height: 100px; margin-right: 20px; background-color: red; } </style> <body> <div> <p></p> <p></p> </div> <div class="box2"> <p></p> <p></p> <p></p> </div> </body> -
浮动的父容器添加后续伪元素，clear:both ，清除浮动对后续元素的影响(推荐方式)。
<style> * { margin: 0; padding: 0; } .cleafix::after { content: ''; clear: both; display: block } p { float: left; width: 100px; height: 100px; margin-right: 20px; background-color: red; } </style> <body> <div class="cleafix"> <p></p> <p></p> </div> <div class="cleafix"> <p></p> <p></p> <p></p> </div> </body> -
额外的空标签，在浮动元素的父盒子之后添加一个空标签，空标签上添加 clear:both 属性。
<style> * { margin: 0; padding: 0; } .clearboth { clear: both; } p { float: left; width: 100px; height: 100px; margin-right: 20px; background-color: red; } </style> <body> <div> <p></p> <p></p> </div> <div class="clearboth"></div> <div> <p></p> <p></p> <p></p> </div> </body> -
额外的空标签，在浮动元素的父盒子之后添加一个空标签，空标签上添加 clear:both 属性。
<style>
* {
margin: 0;
padding: 0;
}
div {
overflow: hidden;
margin: 20px;
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<!--
两个div
第一个div中的元素在内部浮动
第二个元素中的div在内部浮动
但是两个父盒子之前不要互相影响
-->
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>