CSS总结-----解除浮动

拼搏现实的明天。 2022-06-08 10:47 132阅读 0赞

这一章主要总结解除浮动，在这之前的先提一下定位。

# 1.定位 #

提到定位应该先了解两个知识点：

## 1.相对定位 ##

相对定位是指相对于自己以前在标准流中的位置来定位。  
**这里注意，相对定位并没有脱离标准流，会继续在标准流中占有空间。**  
同时也要想到，既然没有脱离标准流，就意味着会占用标准流的位置，也意味着可以给相对定位的元素设置margin/padding等属性，同时会影响到标准流的布局。

## 2.绝对定位 ##

绝对定位是相对于祖先元素或者body来定位，是相对于一个公共基准。当以body时，参考点是网页首屏，并不是整个网页。（默认情况下都是以body作为参考点）  
这里顺带提一下网页首屏：在我看来，网页首屏是指打开一个网页我们第一眼看到的那个界面

*  不同于相对定位，绝对定位是脱离于标准流的，所以并不会在标准流中占位置。
 *  因此，绝对定位不区分块级元素/行内元素/行内块级元素
 *  absolute设置的绝对定位会从父元素开始向上直系查找(定位流中的父元素！即非static定位的元素)，直到html,这里要知道，html和body在位置上是有区别的
 *  当有多个可选父元素时，会优先选择最近的，就近原则

# 2.解除浮动 #

盒子是具有高度的，在标准流中盒子的搞对会被内容高度撑起来  
但是浮动流中浮动的内容不会撑起盒子的高度

解除浮动的原因是：相邻的盒子之间，如果前面的盒子没有高度，那么后面盒子中的浮动元素就会去找前面的浮动元素，这就导致了界面的混啦，所以，我们需要在必要的时候清除浮动

## 1.给前面的盒子设置高度 ##

1 <head>
        2   <title>清除浮动</title>
        3   <meta charset="utf-8"/>
        4   <style> 5 .test1{ height: 50px;} 6 li{ float: left;text-align: center;letter-spacing: 20px;} 7 8 </style>
        9 </head>
       10 <body>
       11   <div>
       12       <p>清除浮动</p>
       13   </div>
       14   <div style="color:red;" class="test1">
       15       <P>RED</P>
       16       <ul>
       17           <li>
       18               one
       19           </li>
       20           <li>
       21               two
       22           </li>
       23           <li>
       24               three
       25           </li>
       26       </ul>
       27   </div>
       28   <div style="color:green;" class="test2">
       29       <P>green</P>
       30       <ul>
       31           <li>
       32               AAA
       33           </li>
       34           <li>
       35               BBB
       36           </li>
       37           <li>
       38               CCC
       39           </li>
       40       </ul>
       41   </div>
       42 </body>

但是，高度设置在正常使用中一般不会强制去写  
所以这种方法一般不是经常使用的

![这里写图片描述][SouthEast]

忽略前后的字符间距。这里主要看的是green,在没设置高度的时候，green被合并到前面的盒子里了。

## 2.外墙法 ##

我们可以使用clear:both;清除前面浮动元素对浮动的影响  
而外墙法是指在两个块级元素之间添加一个额外的块级，并为其定义clear:both样式  
**这种是可以使用margin属性的，但是会产生无意义的标签，所以考虑使用。**

<head> <title>清除浮动</title> <meta charset="utf-8"/> <style> .test1{ height: 50px;} li{ float: left;text-align: center;letter-spacing: 6px;} .test4{ color:red;} nav li{ width: 120px;height: 21px;text-align: center;padding-top: 45px;float: left;} li{ list-style: none;margin: 0px;padding: 0px;} ul{ width: auto !important;list-style: none;margin: 0px;padding: 0px;} </style> </head> <body> <DIV class="test3"> <UL class="nav"> <LI class="nav_icon1" style="cursor: pointer;" onclick="window.open('../','_self')"><SPAN>1首　页</SPAN></LI> <LI class="nav_icon2" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qzf/xxgk/','_blank')"><SPAN>2公开</SPAN></LI> <LI class="nav_icon3" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qkhome/','_blank')"><SPAN>3服务</SPAN></LI> <LI class="nav_icon4" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qzf/hdjl/','_blank')"><SPAN>4交流</SPAN></LI> <LI class="nav_icon5" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qzf/qkxw/','_blank')"><SPAN>5新闻</SPAN></LI> <LI class="nav_icon6" style="cursor: pointer;" onclick="window.open('http://www.qiaokou.gov.cn/qzf/qkgk/','_blank')"><SPAN>6流动</SPAN></LI> </UL> </DIV> <div style="clear:both;" <DIV class="test4"> <UL class="nav"> <LI class="nav_icon1" style="cursor: pointer;" ><SPAN>1首　页</SPAN></LI> <LI class="nav_icon2" style="cursor: pointer;" ><SPAN>2公开</SPAN></LI> <LI class="nav_icon3" style="cursor: pointer;" ><SPAN>3服务</SPAN></LI> <LI class="nav_icon4" style="cursor: pointer;" ><SPAN>4交流</SPAN></LI> <LI class="nav_icon5" style="cursor: pointer;" ><SPAN>5新闻</SPAN></LI> <LI class="nav_icon6" style="cursor: pointer;" ><SPAN>6流动</SPAN></LI> </UL> </DIV> </body>

![这里写图片描述][SouthEast 1]

仔细看我们会发现，第二个浮动找向第一个浮动了，当我们添加了

后，浮动就断了

## 4.内墙法 ##

内墙法的特点在于在前面最后一个盒子，或者说要与后面隔开的盒子后面加入一个盒子。

<div>
        <UL class="nav">
                <LI class="nav_icon1" style="cursor: pointer;" ><SPAN>1首　页</SPAN></LI>
                <LI class="nav_icon2" style="cursor: pointer;" )"><SPAN>2公开</SPAN></LI>
    
                <div style="clear:both;"/>
        </UL>
    </div>
    <div>
        <p>后面的浮动</p>
    </div>

如代码所示，内墙法的主要特点在于清除浮动的盒子被放到是一个盒子里面了。

## 5.给前面的盒子加入overflow:hidden ##

overflow:hidden用于清除溢出盒子之外的内容，但是同时因为会触发BLOCK FORMATTING CONTEXTS,所以亦清除了浮动

方法：前面的盒子的CSS元素中加入属性overflow:hidden

缺点：会和定位产生冲突。

## 6.添加伪元素 ##

这种方法就有的提了  
因为要去介绍什么是伪元素。。。  
这里用一个新的文章去解释。  
[http://blog.csdn.net/zzg19950824/article/details/78156051][http_blog.csdn.net_zzg19950824_article_details_78156051]

方法有两种：  
给前面的元素加上一个after伪元素  
给前面的元素加上双伪元素：after和before

下面贴上代码就明白了

.test3:after { content:'';display:block;height: 0;visibility: hidden;clear: both;}

.test3:after,.test3:before { content:'';display:block;height: 0;visibility: hidden;clear: both;}

这两段代码的意思给类名为test3的代码块添加伪元素，因为伪元素除了不会在文档中生成，具有和正常元素相同的作用，所以里面的属性设置同样生效了。  
**其中的几项设置是为了让伪元素的存在不会影响原有盒子的形状高度。**

![这里写图片描述][SouthEast 2]

# 总结： #

至此清除浮动的几项方法就总结的差不多了，方法有很多，尽量选择不会影响到其他组件的方法。

[SouthEast]: /images/20220608/1760c3f756974ec7b43c0d339d494411.png
[SouthEast 1]: /images/20220608/b84a60d2ef6447c6862664377a55ca2e.png
[http_blog.csdn.net_zzg19950824_article_details_78156051]: http://blog.csdn.net/zzg19950824/article/details/78156051
[SouthEast 2]: /images/20220608/c94d1ee102dd40e282ba1c0cdd77fa78.png