关于float浮动的注意事项

╰+哭是因爲堅強的太久メ 2022-09-30 06:50 183阅读 0赞

关于float属性，我们是用来定义元素在哪个方向浮动的，之前这个属性是用来应用于图像的，使文本可以围绕图像周围，不过在现在的css中，任何的元素都可以进行浮动的。浮动的元素都是生成一个块级而无论之前这个元素是什么元素。这个块级框实际上就是可以设置高度，宽度等属性的意思。如果是<a>标签，如果我们应用了浮动的话，本来<a>标签就是行内的元素是不可以设置大小的，它的宽度一般就是它的内容的宽度，高度也是内容的高度，但是如果在这里我们设置了浮动的话，那么<a>标签就可以设置大小了。如下图，我只设置了relative1和relative2有浮动，他们都是<a>元素的标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style>  
.relative1 \{  
float:left;  
    width:100px;  
height:100px;  
    border:4px black solid;  
\}  
.relative2 \{  
 float:left;  
 background-color: white;  
 width:100px;  
 height:100px;  
 border:4px red solid;  
\}  
.relative3\{  
width:500px;  
height:100px;  
border:4px blue solid;  
\}  
</style>  
</head>  
<body>  
<a class="relative1">  
relative1  
</a>  
<a class="relative2">  
relative2  
</a>  
<a class="relative3">  
relative3  
</a>  
</body>  
</html>

![Center][]

就可以明显地看出，设置了浮动的元素，不管他之前是什么类型的元素，最终都可以成为块级框的。

\*\*\*\*\*\*\*\*\*\*有些时候，我们设置了浮动，但是没有设置浮动的元素在页面上显示出的效果是位于浮动元素里面或者上面，那我们怎么能让没有设置浮动的元素能够正常地显示出其正确的位置呢。例如下图：

![Center 1][]

<section>是放置在浮动元素的后面的，可是出来的效果确是这样子，那我们有什么方法可以让<section>放置在浮动元素的下方呢？

在<section>里面设置清除浮动clear:left;就可以让<section>放置在box的后面了。如果我们想清除右浮动的话，就可以设置clear:right,如果全部浮动都要清除的话，就设置为clear:both.

![Center 2][]

[Center]: /images/20220708/3ebfb9b125bd4b4785e967ee037478c6.png
[Center 1]: /images/20220708/83ca0cb49c114060bd175bc7cc02f7a3.png
[Center 2]: /images/20220708/fd000489be414d7eb709bab63933df6d.png