float 浮动详解

Posted 2020-11-20 8080zh

浮动(float):浮动原先设定时主要是用于文本环绕图像设定的，后来发现其在css布局中有很大的帮助，故渐渐使用浮动。

            浮动后的元素脱离了文档的普通流，使得浮动的元素不占据文档的位置，其他元素可以覆盖其位置。

            浮动元素不影响块框元级元素布局，但是可以影响内联元素（主要是文本）布局。（即浮动元素不占据文档流位置，不影响其他元素布局，但是浮动元素的内联元素如：文本等会改变其布局）

 

 如图：块1浮动，块2 没有浮动，其位置在块一处（被覆盖：浮动元素不占据文档流位置），但是其内联的文本却在其原本的位置（浮动元素的内联元素布局改变）。

 

浮动的文本环绕：文本的位置会占据#A的位置，但是其文本会始终环绕在浮动元素A附件。

 

 

1. #A {  
2.     float:left;  
3.     width:200px;  
4.     height:200px;  
5.     background:#C00;  
6. }  
7. #B {  
8.     width:480px;  
9.     height:230px;  
10. 10.     background:#000;  

浮动的弊端（高度塌陷）：  如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会踏缩为零。

 

浮动的删除：1.clear:both  ----如果浮动较多，会有很多<div class=’clear’></div>

            2.在容器中使用overflow：auto或者hidden 

            3.给浮动的容器也添加浮动 float -------这样会使容器也带有浮动，影响整体布局

            4.使用伪类元素 :after  在其容器中添加新样式 -------推荐使用，可复用性高

<div class="container clearfix">

        <div class="block1"><span>块1</span></div>

        <div class="block2"><span>块2</span></div>

        <div class="block3"><span>块3</span></div>

    </div>

 

.clearfix:after{

        content:".";

        display:block;

        height:0;

        clear:both;

        visibility:hidden;

    }