一、CSS浮动概念
1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
二、css浮动
浮动特性
1. 浮动元素会脱离标准流(脱标)
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性
例1:
代码如下(示例):
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
border: 1px dotted black;
margin: 10px;
}
.box1 {
float: right;
}
</style>
例2:
代码如下(示例):
<style>
div {
/*给所有盒子加左浮动*/
float: right;
width: 100px;
height: 100px;
background-color: pink;
border: 1px dotted black;
margin: 10px;
}
</style>
例3:如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。
代码如下(示例):
<style>
div {
width: 600px;
height: 100px;
float: left;
background-color: pink;
border: 1px dotted black;
margin: 10px;
}
</style>
例4:如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。
代码如下(示例):
<style>
div {
width: 600px;
height: 400px;
float: left;
background-color: pink;
border: 1px dotted black;
margin: 10px;
}
.box2,
.box3 {
height: 300px;
}
</style>
三、css浮动清除
一、父级添加overflow: hidden;
代码如下(示例):
<ul>
<li></li>
<li></li>
</ul>
<style>
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
}
ul {
/*给父元素添加overflow: hidden;*/
overflow: hidden;
padding: 0;
margin: 0;
background: pink;
}
</style>
二、通过属性clear:both;达到清除浮动的目的
元素浮动后,只需要在浮动元素添加多一个块级元素,并添加clear: both;属性,便可以达到清除浮动的目的。
代码如下(示例):
<ul>
<li></li>
<li></li>
<div style="clear: both;"></div>
</ul>
<style>
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
}
ul {
padding: 0;
margin: 0;
background: pink;
}
</style>
三、通过给父级元素添加伪类after,达到清除浮动的目的;
这种方式也是使用clear: both;的方式达到效果,只是变相的使用了伪类after,使得页面结构更简洁,也是常用的清理浮动的方式。
代码如下(示例):
<style>
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
}
.cc:after {
content: '';
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
ul{
background: pink;
}
</style>
<ul class="cc">
<li></li>
<li></li>
</ul>
四、使用双伪类;
代码如下(示例):
<style>
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
}
.cc:after,
.cc:before {
content: "";
display: block;
clear: both;
}
ul {
background: pink;
}
</style>
<ul class="cc">
<li></li>
<li></li>
</ul>