关于CSS中的float可能出现的小问题
- 前言：最近学习CSS的float所遇到点小问题，然后顺便分享给大家。
一、什么是CSS以及float
（一） CSS概述
CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
（二） float概述
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
二、float可能出项的问题
（一) 当没有父级块明确的边界时,float可能没有预想的效果
1.没有明确的边界
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>floatTest</title>
<style type="text/css">
#d1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
} #d2 {
float: left;
width: 100px;
height: 100px;
background-color: green;
} #d3 {
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head> <body>
<div style="width:auto; border:solid 1px black;">
<!--<div style="width: 300px;height: 300px;border: solid 1px black;">-->
<div id="d1">
d1
</div>
<div id="d2">
d2
</div>
<div id="d3">
d3
</div>
</div> </body> </html>
浮动前
浮动后
2.有明确的边界时
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>floatTest</title>
<style type="text/css">
#d1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
} #d2 {
float: left;
width: 100px;
height: 100px;
background-color: green;
} #d3 {
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head> <body>
<!--<div style="width:auto; border:solid 1px black;">-->
<div style="width: 200px;height: 200px;border: solid 1px black;">
<div id="d1">
d1
</div>
<div id="d2">
d2
</div>
<div id="d3">
d3
</div>
</div> </body> </html>
浮动前
浮动后
3.总结
在选择需要进行浮动操作的时候，一定要明确浮动的边界，这样才能出想要的效果。
（二) 对div块的设定导致的问题
1.div范围定义较小
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>floatTest</title>
<style type="text/css">
.divs {
/*float: right;*/
} .divs div {
float: right;
} #d1 {
width: 100px;
height: 100px;
background-color: red;
} #d2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head> <body>
<div style="width: 700px;height: 700px;border: solid 1px black;">
<div style="width: 200px;height: 200px;border: solid 1px black;" class="divs">
<div id="d1">
d1
</div>
<div id="d2">
d2
</div>
</div>
</div> </body> </html>
浮动前
浮动后
2.合理的div块定义
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>floatTest</title>
<style type="text/css">
.divs {
float: right;
} .divs div {
/*float: right;*/
} #d1 {
width: 100px;
height: 100px;
background-color: red;
} #d2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head> <body>
<div style="width: 700px;height: 700px;border: solid 1px black;">
<div style="width: 200px;height: 200px;border: solid 1px black;" class="divs">
<div id="d1">
d1
</div>
<div id="d2">
d2
</div>
</div>
</div> </body> </html>
浮动前
浮动后
3.总结
当我们将整个divs块下的元素都进行了右浮动，但是我们以为这就是将divs块进行了移动，但是其实只是d1和d2块在divs块中进行了移动，divs块并没有动，所以当我们要移动一整块的divs和分别移动的效果是完全不一样的，所以一定要注意这样的小细节。