HTML——CSS——浮动（笔记）

拼搏现实的明天。 2023-10-02 11:22 25阅读 0赞

## 1.核心原理 ##

多个盒子的布局

## 2.多个盒子布局的种类 ##

### 2.1 普通流布局(标准流布局) ###

标准流布局定义->按照默认的方式排列，例如：
    A.块级元素独占一行，由上至下排列（识别宽高）
    (div,hr,p,h1-h6,ul,ol,dl,form,table, ...)
    
    B.行内元素,从左至右，碰到父元素边框自动换行（设置宽高无效）
    (span,a,i,em, ...)
    
    C.行内块级元素
    
    分析：使用display属性三者可以相互转化。
    （1）display:inline转为行内元素
    （2）display:block转为块级元素
    （3）display：inline-block转为行内块级元素

代码分析：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: gold;
            border: green;
            display: inline;/*行内元素*/
            display: block;/*块级元素*/
            display: inline-block;/*行内块级元素*/
        }
        span{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            border:1px,solid green;
            display: inline-block;
        }
        </style>
    </head>
    <body>
        <div>块级元素</div><div>独占一行</div>
        <span>行内元素</span><span>手拉手</span>
    </body>
    </html>

### 2.2 浮动布局 ###

**问题1：如何将多个div的盒子排列成一行?**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             div{
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
             }
         </style>
        </head>
        <body>
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </body>
    </html>

以上使用的方式：转换为行内块元素，但是却很难把空白缝隙去掉！

### 2.3 定位布局 ###

## 3.浮动 ##

### 3.1应用场景<主要解决块级元素缝隙的问题> ###

A.很多布局效果，标准流无法完成，此时可以通过浮动解决。
    B.浮动最常见的应用场景：将多个块级元素一行内排列。

### 3.2解决之前缝隙问题<属性 float> ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             div{           
                width: 100px;
                height: 100px;
                background: red;
                float: left;
                float:right;
                float:none;
             }
         </style>
        </head>
        <body>
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </body>
    </html>

### 3.3浮动定义 ###

浮动一般使用float属性,将其移动到一边,直到左边缘或者右边缘直到包块框或另一个浮动框的边框

### 3.4使用浮动 ###

选择器{float:属性值;}

### 3.5浮动种类 ###

3.5.1 不浮动 none

3.5.2 左浮动 left

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             div{           
                width: 100px;
                height: 100px;
                background: red;
                float: left;
             }
         </style>
        </head>
        <body>
            <div class="left">a</div>
            <div class="right">b</div>
        </body>
    </html>

3.5.3 右浮动 right

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             div{           
                width: 100px;
                height: 100px;
                background: red;
                float: right;
             }
         </style>
        </head>
        <body>
            <div class="left">a</div>
            <div class="right">b</div>
        </body>
    </html>

### 3.6案例:实现左右div浮动 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             div{           
                width: 100px;
                height: 100px;
                background: red;
             }
             .left{
                float: left;
             }
             .right{
                float: right;
             }
         </style>
        </head>
        <body>
            <div class="left">a</div>
            <div class="right">b</div>
        </body>
    </html>

### 3.7浮动特点(极其重要！！) ###

3.7.1浮动元素会脱离标准流(!)

1.脱离标准普通流的控制移动到制定的位置（专业术语:脱标）

2.浮动的盒子不再保留原来的位置

**案例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             
             .left{
                width: 100px;
                height: 100px;
                background: yellow;
                float: left;
             }
             .right{
                width: 300px;
                height: 300px;
                background: red;
             }
             
         </style>
        </head>
        <body>
            <div class="left">a</div>
            <div class="right">b</div>
        </body>
    </html>

3.7.2浮动元素会具有行内块元素的特性

**1.现象：(行内元素无法设置宽高)**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             span{
                width: 200px;
                height: 200px;
                background: yellow;
             }
         </style>
        </head>
        <body>
            <span></span>
        </body>
    </html>

**2.场景1：使用浮动元素(行内元素有了"宽高")**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             span{
                float: left;//建议放钱买你
                width: 200px;
                height: 200px;
                background: yellow;
             }
         </style>
        </head>
        <body>
            <span></span>
        </body>
    </html>

结论：

如果行内元素有了浮动，则不需要转换块级、行内块元素就可以设置宽度和高度

3.场景2：块级元素添加浮动的效果

如果块级盒子没有设置宽度，默认的宽度和父亲元素一样的宽度，但如果加入浮动元素，大小由内容决定

**案例：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
              div{
                float: left;
                background: red;
              }
         </style>
        </head>
        <body>
             <div>333333</div>
        </body>
    </html>

3.7.3浮动的盒子只会影响后面的标准流，不会影响前面的标准流

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             #one{
                height: 50px;
                width: 50px;
                background: yellow;
             }
             #two{
                height: 80px;
                width: 80px;
                background: red;
                float: left;
             }
             #three{
                height: 100px;
                width: 100px;
                background: blueviolet;
                /**float: left;
             }
             
         </style>
        </head>
        <body>
            <div id="one">
                
            </div>
            <div id="two">
                
            </div>
            <div id="three">
            </div>
        </body>
    </html>

## 4.浮动致命问题！ ##

### 4.1无浮动 ###

### 4.2子元素都加入左浮动(父元素塌陷，高度为0) ###

**分析原因：**浮动的元素不占有位置，所以父级元素的高度为0

### 4.3父元素后面的元素跟随问题 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             .father{
                width: 700px;
                border: 1px solid red;
                margin: 0 auto;
             }
             .one{
                width: 200px;
                height: 200px;
                background-color: deepskyblue;
                float: left;
             }
             .two{
                width: 300px;
                height: 300px;
                background-color: greenyellow;
                float: left;
             }
             .brother{
                height: 100px;
                background-color: red;
             }
         </style>
        </head>
        <body>       
             <div class="father">
                <div class="one">one</div>
                <div class="two">two</div>           
             </div>
             <div class="brother"></div>
        </body>
    </html>

## 5.清除浮动行动！ ##

**原理：由于高度为0，导致父级塌陷，而某些情况又不能设置高度！**

### 5.1浮动语法 ###

选择器{clear:属性值}

### 5.2 clear属性值种类 ###

1清除左浮动left
    
    2清除右浮动right
    
    3清除左右浮动both(企业中只用这种！！)

### 5.3 清除浮动的场景种类 ###

5.3.1 场景1：添加额外标签(元素末尾添加空标签，这个标签必须是块级元素)-不常用

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             .father{
                width: 700px;
                border: 1px solid red;
                margin: 0 auto;
             }
             .one{
                width: 200px;
                height: 200px;
                background-color: deepskyblue;
                float: left;
             }
             .two{
                width: 300px;
                height: 300px;
                background-color: greenyellow;
                float: left;
             }
             .brother{
                height: 100px;
                background-color: red;
             }
             .clear{                 /** 添加空标签**/
                clear:both
             }
         </style>
        </head>
        <body>       
             <div class="father">
                <div class="one">one</div>
                <div class="two">two</div>
                <div class="clear"></div> 
             </div>
             <div class="brother"></div>
        </body>
    </html>

5.3.2 场景2：父级元素添加overflow属性

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             .father{
                width: 700px;
                border: 1px solid red;
                margin: 0 auto;
                overflow: hidden; /**给父级元素添加overflow
             }
             .one{
                width: 200px;
                height: 200px;
                background-color: deepskyblue;
                float: left;
             }
             .two{
                width: 300px;
                height: 300px;
                background-color: greenyellow;
                float: left;
             }
             .brother{
                height: 100px;
                background-color: red;
             }
              
         </style>
        </head>
        <body>       
             <div class="father">
                <div class="one">one</div>
                <div class="two">two</div>
                 
             </div>
             <div class="brother"></div>
        </body>
    </html>

5.3.3 场景3：父级元素添加after伪元素(大厂专用)

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
         <style type="text/css">
             .father{
                width: 700px;
                border: 1px solid red;
                margin: 0 auto;
             }
             .one{
                width: 200px;
                height: 200px;
                background-color: deepskyblue;
                float: left;
             }
             .two{
                width: 300px;
                height: 300px;
                background-color: greenyellow;
                float: left;
             }
             .brother{
                height: 100px;
                background-color: red;
             }
             //对这个样式加一伪元素样式
             .clear:after{
                content:"";
                display: block;//让我们的元素成为块级元素
                height: 0;//不需要高度
                clear: both;//把两侧清空（清楚里面的浮动）
             }
         </style>
        </head>
        <body>       
             <div class="father clear">//加个clear样式
                <div class="one">one</div>
                <div class="two">two</div>
                 
             </div>
             <div class="brother"></div>
        </body>
    </html>

## 6.总结 ##

清除浮动的原因：1.父级元素无法设置高度 2.子盒子浮动 3.影响下面元素的布局