11-DIV+CSS-浮动

蔚落 2022-09-18 02:49 178阅读 0赞

浮动

# 1. 概念 #

浮动的框可以向左或向右移动,  
直到它的外边缘碰到包含框或另一个浮动框的边框为止  
  
由于浮动框不在文档的普通流中,  
所以文档的普通流中的块框表现得就像浮动框不存在一样。  
  
左浮动  
右浮动  
清除浮动

# 2. 左/右 浮动  #

##  0) 初始情况, div纵向排列的 ##

![SouthEast][]

##  1) 右浮动, ##

把div1向右浮动时,它脱离标准流并且向右移动,  
直到它的右边缘碰到包含框的右边缘为止.  
即离开标准流,向右移动,碰到其父元素右边框为止.

![SouthEast 1][]

body {
                width: 600px;
                height: 3000px;
                border: 1px solid gray;
                /*margin: 0 auto;*/
            }
    
          .baseCls {
            width: 150px;
            height: 100px;
            border: 1px solid blue;
            background-color: pink;
            margin: 5px;
          }
         
          .rightFloat {
            /*
             右浮动:
                该元素尽量向右移动,
                直到碰到它的父元素的右边界为止
            */
            float: right; 
          }

##  2) 左浮动,纵向排列 ##

div1 左移动, 碰到包含框的左则为止,  
div2 左移动, 碰到div2为止,  
div3 左移动, 碰到div3为止.

![SouthEast 2][]

##  3) 左浮动, 空间不够, 向下移动, 再左移动 ##

![SouthEast 3][]

<hr/>
        <h3>左浮动,水平排列,当前行空间不够时,则向下移动,直到有足够空间</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat">div3</div>    
        <div class="baseCls leftFloat">div4</div>
        <div class="baseCls leftFloat">div5</div>
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>

##  4) 左浮动, 空间不够, 下移后左移被"卡住"的情况 ##

![SouthEast 4][]

<hr/>
        <h3>左浮动,水平排列,向下移动时可能会被其他浮动元素"卡住"</h3>
        <div class="baseCls leftFloat" style="height:130px;">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat">div3</div>    
        <div class="baseCls leftFloat">div4</div>
    
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>

![SouthEast 5][]

<hr/>
        <h3>左浮动,水平排列,向下移动时可能会被其他浮动元素"卡住"</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat" style="height:130px;">div2</div>
        <div class="baseCls leftFloat">div3</div>    
        <div class="baseCls leftFloat">div4</div>    
        <div class="baseCls leftFloat">div5</div>    
    
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>

![SouthEast 6][]

<hr/>
        <h3>左浮动,水平排列,向下移动时可能会被其他浮动元素"卡住"</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat" style="height:130px;">div3</div>    
        <div class="baseCls leftFloat">div4</div>    
        <div class="baseCls leftFloat">div5</div>

##  5) 浮动的理解 ##

如果一个元素 右/左 浮动, 则:  
① 它本身会尽可能向 右/左 移动,  
直到碰到边框或者别的浮动元素,  
注意,浮动对块元素和行内元素都生效.  
② 元素向 右/左 浮动,  
相当于让出自己的 左/右 边,  
别的元素就会在它的 左/右 边 排列.

# 3. 字包图示例 #

![SouthEast 7][]

/* 设置强制自动换行 */
          body {
            word-break:break-all;   
            width:600px;
            border: 1px solid gray;
          }
    
          img {
            float: left;
          }

<body>
        <img src="1.jpg"/>
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx,
    
      </body>

# 4. 清除浮动  #

1) 概念  
  
如果不希望别的元素在某个元素的或者右边,  
  
2) 方式  
  
可以使用清除浮动的方法  
① clear: right;  
② clear: left;

③ clear: both;

# 5. 浮动示例完整代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
          <title>float1.html</title>
          <meta http-equiv="keywords" content="value1,value2,...">
          <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    
        <style type="text/css">
          
            body {
                width: 600px;
                height: 3000px;
                border: 1px solid gray;
                /*margin: 0 auto;*/
            }
    
          .baseCls {
            width: 150px;
            height: 100px;
            border: 1px solid blue;
            background-color: pink;
            margin: 5px;
          }
         
          .rightFloat {
            /*
             右浮动:
                该元素尽量向右移动,
                直到碰到它的父元素的右边界为止
            */
            float: right; 
          }
    
          .leftFloat {
            /*
             左浮动:
                该元素尽量向左移动,
                让出自己右边空间,给下一个元素显示.
            */
            float: left;
          }
    
        </style>
    
      </head>
      <body>
        
        <h3>初始状态</h3>
        <div class="baseCls">div1</div>
        <div class="baseCls">div2</div>
        <div class="baseCls">div3</div>
    
        <hr/>
        <h3>div1右浮动</h3>
        <div class="baseCls rightFloat">div1</div>
        <div class="baseCls">div2</div>
        <div class="baseCls">div3</div>
    
    
        
        <hr/>
        <h3>左浮动,水平排列</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat">div3</div>
        <br/><br/><br/><br/><br/><br/><br/>
    
        <hr/>
        <h3>左浮动,水平排列,当前行空间不够时,则向下移动,直到有足够空间</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat">div3</div>    
        <div class="baseCls leftFloat">div4</div>
        <div class="baseCls leftFloat">div5</div>
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
    
        <hr/>
        <h3>左浮动,水平排列,向下移动时可能会被其他浮动元素"卡住"</h3>
        <div class="baseCls leftFloat" style="height:130px;">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat">div3</div>    
        <div class="baseCls leftFloat">div4</div>
    
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
    
        <hr/>
        <h3>左浮动,水平排列,向下移动时可能会被其他浮动元素"卡住"</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat" style="height:130px;">div2</div>
        <div class="baseCls leftFloat">div3</div>    
        <div class="baseCls leftFloat">div4</div>    
        <div class="baseCls leftFloat">div5</div>    
    
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>    
    
        <hr/>
        <h3>左浮动,水平排列,向下移动时可能会被其他浮动元素"卡住"</h3>
        <div class="baseCls leftFloat">div1</div>
        <div class="baseCls leftFloat">div2</div>
        <div class="baseCls leftFloat" style="height:130px;">div3</div>    
        <div class="baseCls leftFloat">div4</div>    
        <div class="baseCls leftFloat">div5</div>   
    
      </body>
    </html>

[SouthEast]: /images/20220828/8309160615e143168cdd385a5eb2b07d.png
[SouthEast 1]: /images/20220828/4a9c173142d04491aa6f17cb5282e96e.png
[SouthEast 2]: /images/20220828/61051e19a7ce481d878b93ad2c3589c8.png
[SouthEast 3]: /images/20220828/3fcf1722eec34655b5a2120fd42503ec.png
[SouthEast 4]: /images/20220828/8e3844b3b4454fa4a406bab6b3c0229f.png
[SouthEast 5]: /images/20220828/2c6eb018d235439b876bb97eee22be08.png
[SouthEast 6]: /images/20220828/c74954feaea74cd6850aa75dd6542bff.png
[SouthEast 7]: /images/20220828/9f6ed2c55458447581dd0be724780e52.png