2020 July 23 HTML与CSS

CSS第八篇：CSS属性-浮动

CSS属性-浮动

定位方案

在CSS中，有3种常用的方法对元素进行定位、布局
1. normal flow：标准流、常规流、文档流
2. absolute positioning：绝对定位
3. float：浮动
绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

float属性

可以通过float属性让元素产生浮动效果，float的常用取值
1. none：不浮动，默认值
2. left：向左浮动
3. right：向右浮动

浮动的规则

元素一旦浮动后
1. 脱离标准流
2. 朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止

定位元素会层叠在浮动元素上面

层次依次为：(最底层)普通元素->浮动元素->定位元素(最高层)

 .box1 {
     width: 100px;
     height: 100px;
     background-color: #f00;
     /* 浮动能让元素脱离标准流 */
     float: left;
 }
 .box2 {
     width: 200px;
     height: 200px;
     background-color: #ff0;
     /* 一旦设置为定位元素，那么就会覆盖box1 */
     position: relative;
 }

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

比如行内级元素、inline-block元素
利用此特性，可以轻松实现文字环绕功能

代码举例：

 <style>
     .box1 {
         width: 50px;
         height: 50px;
         background-color: #f00;
         /* 浮动能让元素脱离标准流 */
         float: left;
     }
     .box2 {
         width: 200px;
         height: 200px;
         background-color: #ff0;
     }
     strong {
         display: inline-block;
     }
 </style>
            
 <div class="box1">box1</div>
 <div class="box2">
     <img src="./images/car.png" alt="">
     <span>span</span>
     <strong>strong</strong>
     box2 box2 box2 box2 box2 box2
 </div>

文字内容也相当于行内元素

行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

意思就是浮动到当前行的最顶端，不是父控件的最顶端

代码举例：

 <style>
     p {
         width: 400px;
         height: 400px;
         border: 1px solid #000; 
     }
     span {
         /* 浮动到当前行的最左端/顶，不是父控件的最左端、顶端*/
         float: left;
         background-color: #ff0;
     }
     strong {
         background-color: #f00;
     }
 </style>
 <body>
     <p>我是中国人，我是中国人，我是中国人，我是中国人，我是中国人，我是中国<span>人，我</span><strong>是中国人，我是</strong>中<img src="./images/car.png" alt="">国人，我是中国人，我是中国人，我是中国人，我是中国人，我是中国人，</p>
 </body>

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

浮动元素之间不能层叠

如果一个元素浮动，另一个浮动元素已经在那个位置上了，后浮动的元素将紧贴着前一个浮动的元素（左浮找左浮，右浮找右浮）
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。

例子：

 <style>
     .container {
         width: 200px;
         height: 350px;
         border: 1px solid #000;
     }
     .box1 {
         width: 50px;
         height: 50px;
         background-color: #f00;
         float: left;
         /* position: absolute; */
     }
     .box2 {
         width: 100px;
         height: 100px;
         background-color: #ff0;
         /* position: absolute; */
         float: left;
     }
     .box3 {
         width: 150px;
         height: 150px;
         background-color: #0f0;
         float: left;
     }
 </style>
            
 <body>
 <div class="container">
     <div class="box1">box1</div>
     <div class="box2">box2</div>
     <div class="box3">box3</div>
     <strong>666</strong>
 </div>   
 </body>

浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

 .container {
     width: 200px;
     height: 350px;
     border: 1px solid #000;
 }
 .box1 {
     width: 50px;
     height: 50px;
     background-color: #f00;
     float: left;
 }
 .box2 {
     width: 160px;
     height: 100px;
     background-color: #ff0;
     float: left;
 }
 .box3 {
     width: 30px;
     height: 100px;
     background-color: #0f0;
     float: right;

 }

浮动的应用

浮动应用的场景
1. 解决行内级元素、inline-block元素的水平间隙问题
2. 布局

清除浮动

标准流代码

.container {
    width: 300px;
    /* height：根据子元素内容自动计算，包裹子元素*/
    border: 1px solid #000;
}
.box1,.box2 {
    width: 100px;
    height: 100px;
}
.box1 {
    background-color: #ff0;
}
.box2 {
    background-color: #0f0;
}
<div class="container">
   <div class="box1">box1</div>
   <div class="box2">box2</div>
</div>  

浮动存在的问题

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
1. 父元素计算自己高度的时候，不会把这个元素计算进去
导致了父元素高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清除浮动（清理浮动）

举例：脱标元素不会向父元素汇报高度，导致父元素高度坍塌

box2绝对定位脱标

 .box2 {
     background-color: #0f0;
     /* box2元素脱标 */
     position: absolute;
 }

box1/box2浮动脱标

 .box1 {
     background-color: #ff0;
     /* box1元素浮动 */
     float: left;
 }
 .box2 {
     background-color: #0f0;
     /* box2元素浮动 */
     float: right;
 }

清除浮动的常见方法

给父元素设置固定高度
1. 扩展性不好（不推荐）
让父元素浮动
1. 可能导致页面中所有元素都浮动
2. 父元素脱离了标准流
3. 改变了元素的盒子特性（不推荐）
```
 .container {
     width: 300px;
     /* 让父元素浮动 */
     float: left;
     border: 1px solid #000;
 }
```
让父元素成为绝对定位元素（position设置为absolute或者fixed）
1. 父元素脱离了标准流
2. 改变了元素的盒子特性（不推荐）
```
 .container {
     width: 300px;
     /* 让父元素称为绝对定位 */
     position: absolute;
     border: 1px solid #000;
 }
```

给父元素设置display为inline-block、inline-table、table、table-cell、tab-caption

改变了父元素的盒子特性（不推荐）

 .container {
     width: 300px;
     /* 父元素设置display */
     /* display: inline-block; */
     display: table-cell;
     border: 1px solid #000;
 }

给父元素设置obverflow为visible以外的值（比如hidden、auto、scroll）
1. 改变了父元素对内容溢出的默认行为（不推荐）
```
 .container {
     width: 300px;
     /* 给父元素设置obverflow */
     overflow: hidden;
     border: 1px solid #000;
 }
```

在父元素最后增加一个空的块级子元素，并且让它设置clear:both

会增加很多无意义的空标签，维护麻烦

违反了结构与样式分离的原则（不推荐）

 /* 设置clear: both; */
 .footer {
     height: 0;
     background-color: #0ff;
     clear: both;
 }
 <div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!-- 增加一个子元素 -->
    <div class="footer"></div>
 </div>

在父元素最后增加一个br标签：<br clear="all">

会增加很多无意义的空标签，维护麻烦

违反了结构与样式分离的原则（不推荐）

 <div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!--元素最后增加一个br标签  -->
    <br clear="all">
 </div>

给父元素增加::after伪元素（推荐）

纯CSS样式解决，结构与样式分离

 .container::after {
     content: "";
     display: block;
     clear: both;
     /* 兼容旧浏览器 */
     height: 0;
     /* 兼容旧浏览器 */
     visibility: hidden;
 }
 .container {
     /* 兼容IE6~7浏览器 */
     *zoom: 1;
 }

封装:将上面的清除浮动代码封装到一个css文件（class名称为clear-fix），谁需要清除浮动，导入文件，然后设置class即可

 <link rel="stylesheet" href="./clearfix.css">
        
  <!-- 谁需要清除浮动，设置clear-fix属性即可 -->
 <div class="container clear-fix">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
 </div>

清除浮动的使用场合

有些父盒子的高度不能固定，需要动态显示高度，此时需要清除浮动
一般情况下子元素的高度确定，父盒子的高度固定设置，这样就不需要清除浮动

布局总结

标准流特点
1. 块级标签（block）
  1. 元素独占一行，可以设置size，height默认包裹内容，即使整行有空间，也不允许其他元素侵占
2. 行内标签（inline）
  1. 非替换元素
    1. size包裹内容，size不可以设置，一行可以显示多个元素
  2. 替换元素
    1. size可以设置，一行可以显示多个元素
3. inline-block
  1. size包裹内容，size可以设置，一行可以显示多个元素
脱标准流元素特点
1. 绝对定位
  1. (absolute/fixed)元素悬浮起来，多个元素层叠悬浮
  2. 层叠悬浮与整个窗口之上
  3. 定位参照物选取
    1. fixed：参照物为视口
    2. absolute：参照物为最邻近的定位祖先元素
  4. 定位：位置frame，可以设置left、top、right、bottom详细定位
  5. 层叠顺序可以用z-index属性来设置层叠顺序
2. 浮动（float）
  1. 元素浮动在父元素之上，不会超出父元素
  2. 统一父类多个子元素浮动，浮动子元素之间不会层叠，平铺展示
  3. 定位：只能左浮(left)或者右浮(right)

布局应用

标准流
1. 用于垂直方向的布局: 利用block、inline、inline-block的特点来布局
  1. block占据整行、inline不能设置尺寸、inline-block能设置宽高
2. 比如：
  1. 网站的整体布局：header、main、footer
  2. 元素内部子控件从上到下布局
绝对定位
1. 用于层叠布局: 利用不同参照物定位以及脱标元素不占据空间特点来布局
2. 比如：
  1. 相对于某个元素悬浮显示（absolute）
  2. 相当于某个元素切换显示（absolute）
  3. 相对于整个浏览器窗口悬浮显示（fixed）
浮动-float
1. 左右方向的水平布局采用float技术
2. 如果不使用float，分析：
  1. 如果用标准流：
    1. 元素从左往右排布，不能用块级（block），用行内（inline）也不行，不能设置宽高，只能用inline-clock元素
    2. 但是inline-block水平方向排布又有间距，因此不能用标准流
  2. 如果用绝对定位
    1. 元素一旦脱标，其他元素会占据当前元素的空间，当前父元素高度坍塌
    2. 只能设置固定高度，因此不合适
  3. 综上所述，float能解决水平元素间距问题，能清除浮动，防止父元素高度坍塌

网页定位分析

第一部分
1. 整体用绝对定位fixed，相对于整个窗口定位
2. 内部元素用浮动float定位
3. 购物车右上角红色数字可以相对于购物车absolute定位
第二部分
1. 整体用绝对定位fixed，相对于整个窗口定位
2. 内部元素用标准流定位
第三部分
1. 内部元素用float定位
2. 子元素内部子元素用标准流定位
3. 子元素右上角的“*色可选”用绝对定位absolute

CSS属性-clear

clear的常用取值
1. left：要求元素的顶部低于之前生成的所有左浮动元素的底部
2. right：要求元素的顶部低于之前生成的所有右浮动元素的底部
3. both：要求元素的顶部低于之前生成的所有浮动元素的底部
4. none：默认值，无特殊要求
注意点：
1. 一般只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠

代码举例

 <style>
     .box1 {
         width: 100px;
         height: 100px;
         background-color: #ff0;
         float: left;
     }
     .box2 {
         width: 200px;
         height: 200px;
         background-color: #f00;
         float: right;
     }
     .box3 {
         height: 50px;
         background-color: #0ff;
         /* clear: left; */
         /* clear: right; */
         clear: both;
     }
 </style>
    
 <body>
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 </body>