HTML5-浮动

待我称王封你为后i 2022-05-12 07:18 150阅读 0赞

# #

## 常见的网页布局: ##

![70][]

![70 1][]

# #

## **标准文档流** ##

**       概念：**指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

![70 2][]

**标准文档流组成:**

**块级元素（****block****）:       ****<h1>…<h6>****、****<p>****、****<div>****、列表**

**内联元素（****inline****）:       ** **<span>****、****<a>****、****<****img****/>****、****<strong>...**

**注意：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。**

<例如：h1中可以嵌套span元素，但是span中不能嵌套h1元素>

## **display****属性** ##

<table style="width:642px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> <p style="margin-left:0in;"><span style="color:#ffffff;"><strong>值</strong></span></p> </td> 
   <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:521px;"> <p style="margin-left:0in;"><span style="color:#ffffff;"><strong>说明</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>block</strong></span></p> </td> 
   <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:521px;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>inline</strong></span></p> </td> 
   <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:521px;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>inline-block</strong></span></p> </td> 
   <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:521px;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>行内块元素，元素既</strong></span><span style="color:#000000;"><strong>具有</strong></span><span style="color:#000000;"><strong>内联</strong></span><span style="color:#000000;"><strong>元素</strong></span><span style="color:#000000;"><strong>的特性，也具有块元素的</strong></span><span style="color:#000000;"><strong>特性</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:center;vertical-align:middle;width:120px;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>none</strong></span></p> </td> 
   <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:521px;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>设置元素不会被显示</strong></span></p> </td> 
  </tr> 
 </tbody> 
</table>

### display:block;   ###

【显示为块元素，能让行内元素显示宽高，能让行内元素具有块元素的特征】

![70 3][]

### display:inline;   ###

【显示为行内元素，能让块元素具有行内元素的特征】

![70 4][]

### display:inline-block;   ###

【吸取行内元素和块元素共同的特征，既能排在一行，又能显示宽高】

![70 5][]

### display:none;   ###

【元素在页面上看不见，隐藏了，但是在源代码中依然存在】

![70 6][]

### display特性： ###

1.  块级元素与行级元素的转变（block、inline）
2.  控制块元素排到一行（inline-block）
3.  控制元素的显示和隐藏（none）

**块元素排在****一行的方法**

**可以使用什么属性使块元素排在一行？   1.****i****nline-block           2.****float**

**float****属性**

![70 7][]

设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面

**示例：**

……
    <body>
    <div id="father">
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
      <div class="layer04">浮动的盒子……</div>
    </div>
    </body>
    </html>

**设置左浮动**

**依次设置三个图片所在****<div>****左浮动**

.layer01 {
    	border:1px #F00 dashed;
    	float:left;
    }

![70 8][]

.layer02 {
    	border:1px #00F dashed;
    	float:left;
    }

![70 9][]

.layer03 {
    	border:1px #060 dashed;
    	float:left;
    }

![70 10][]

**设置右浮动**

**依次设置****layer01****和****layer02****右浮动**

.layer01 {
    	border:1px #F00 dashed;
    	float:right;
    }

![70 11][]

.layer02 {
    	border:1px #00F dashed;
    	float:right;
    }

![70 12][]

### **inline - block和float的区别：** ###

**1. display:inline-block**

①可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

②位置方向不可控制，会解析空格

③IE 6、IE 7上不支持

**2. float**

①可以让元素排在一行并且支持宽度和高度，可以决定排列方向

②float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

**边框塌陷**

**layer04****设置宽度和右浮动后，为什么边框塌陷了？**

**浮动元素脱离标准文档流，父集里面没内容了就剩下了最上面的一个框**

![70 13][]

**怎么解决？**

**           清除浮动**

**clear****属性**

![70 14][]

示例：![70 15][]

**清除左浮动：**

.layer04 {
        border:1px #666 dashed;
        font-size:12px;
        line-height:23px;
        width: 200px;
        float: right;
        clear:left;
    }

![70 16][]

**清除右浮动：**

.layer04 {
        border:1px #666 dashed;
        font-size:12px;
        line-height:23px;
        width: 200px;
        float: right;
        clear:right;
    }

![70 17][]

**清除两测浮动**

.layer01 {
    	border:1px #F00 dashed;
    	float:left;
    }

![70 18][]

.layer04 {
        border:1px #666 dashed;
        font-size:12px;
        line-height:23px;
        width: 200px;
        float: right;
        clear:both;
    }

![70 19][]

## **解决父级边框塌陷的****方法：** ##

## 1. 浮动元素后面加空div ##

<div id="father">
    
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
    
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
    
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
    
      <div class="layer04">浮动的盒子……</div>
    
      <div class="clear"></div>
    
    </div>
    
    .clear{  clear: both;  margin: 0; padding: 0;  }

弊端：太多空元素会造成阅读困难

![70 20][]

### 2. 设置父元素的高度 ###

<div id="father">
    
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
    
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
    
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
    
      <div class="layer04">浮动的盒子……</div>
    
    </div>
    
    #father {height: 400px; border:1px #000 solid; }

弊端：高度不可控，不灵活

![70 21][]

### 3. 父级添加overflow属性 ###

<div id="father">
    
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
    
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
    
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
    
      <div class="layer04">浮动的盒子……</div>
    
    </div>
    
    #father {overflow: hidden;border:1px #000 solid; }

![70 22][]

优缺点：很完美，但是属性太多；不好分别。

**overflow****属性**

![70 23][]

scroll和auto的区别是在使用auto时，横向如果不需要滚动滚动条就会消失

### 4. 父级添加伪类after ###

<div id="father" class="clear">
    
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
    
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
    
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
    
      <div class="layer04">浮动的盒子……</div>
    
    </div>

.clear:after{
    
        content: '';          /*在clear类后面添加内容为空*/
    
        display: block;      /*把添加的内容转化为块元素*/
    
        clear: both;         /*清除这个元素两边的浮动*/
    
    }

![70 24][]

优点：目前最好的方法，企业里都这么用

### 清除浮动，防止父级边框塌陷的四种方法优缺点： ###

1.  浮动元素后面加空div：     简单，空div会造成HTML代码冗余
2.  设置父元素的高度：          简单，元素固定高会降低扩展性
3.  父级添加overflow属性：   简单，下拉列表框的场景不能用
4.  父级添加伪类after：         写法比上面稍微复杂一点，但是没有副作用，推荐使用

![70 25][]

[70]: /images/20220512/fd4372f96681490b8ed5190ad6e3601c.png
[70 1]: /images/20220512/03a130209e4b4f17923080bc5f88afd8.png
[70 2]: /images/20220512/e3584d0a5d3e4215b9a475b48b2f51b7.png
[70 3]: /images/20220512/5b013079d9d34ca0ba6b307c140f8195.png
[70 4]: /images/20220512/d842ff9bf8ab45a4b57cf04b1df68966.png
[70 5]: /images/20220512/43ab8c599457423c9215e6c4e3ed4f37.png
[70 6]: /images/20220512/a43596c0e8404d2dab6b2f44f295ea4a.png
[70 7]: /images/20220512/2d1992b536d84302aa27f58300e4e33a.png
[70 8]: /images/20220512/8268ac4af05e4ad8a7d0a8cd4e38b258.png
[70 9]: /images/20220512/529a78b048204036a9792b4dfaff26cb.png
[70 10]: /images/20220512/9d737ca946424aa281467ffd27ac33e4.png
[70 11]: /images/20220512/6be8c55311b64df2b3fbbd3ccd70bbe6.png
[70 12]: /images/20220512/b30d26b7e49a4104acbb44cde12325ec.png
[70 13]: /images/20220512/3b36419fb0974f88a57aa520032cee8d.png
[70 14]: /images/20220512/775a5a827cfb4db5ba47ee975b5cc8a8.png
[70 15]: /images/20220512/c7920db7e7e14e0081c91ef6c51bac51.png
[70 16]: /images/20220512/dcf4fea2e8c84f2f8bbd10195fb98c9b.png
[70 17]: /images/20220512/9e8fd1443ae240369e0b5e6e4bcfa53f.png
[70 18]: /images/20220512/ff4eb37058234ba580f1c29d048df1e5.png
[70 19]: /images/20220512/e4ff276dc2a146cbafed2607592029af.png
[70 20]: /images/20220512/a3d0368eeb7e4b33ad35c5576d7e075d.png
[70 21]: /images/20220512/baa9603a6f86499ab0d162b6d8f93933.png
[70 22]: /images/20220512/31e6d26105264bb1bff46bde9b695125.png
[70 23]: /images/20220512/aa84c6490478458fb039dccc62e570e8.png
[70 24]: /images/20220512/1828c207438045b5b5f61cea8289efea.png
[70 25]: /images/20220512/ad5146bf9ec24a6f83c34c2721632897.png