float 浮动详解

Posted 8080zh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了float 浮动详解相关的知识,希望对你有一定的参考价值。

浮动(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;

    }

以上是关于float 浮动详解的主要内容,如果未能解决你的问题,请参考以下文章

通俗易懂的CSS的浮动float详解

float 浮动详解

pfSense 防火墙Floating(浮动)规则详解

清楚float

css float属性详解

css浮动float图文详解,看完豁然开朗