CSS 布局样式——浮动 floatCSS 布局样式——浮动float CSS 布局 —— 浮动流认识浮动首先实现元

CSS 布局样式——浮动`float`

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类以及其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案

CSS 布局 —— 浮动流

认识浮动
- 首先实现元素的浮动就是通过的 float 来实现的设置
- 浮动可以引起的效果就是可以实现元素在其在的容器（container block 父元素）中实现左侧或者右侧放置
- 结合历史来的话，浮动是用来实现解决最基本的一些左右布局来使用的，只是因为当时没有很好的方法才使用的
- 需要注意的一点就是：绝对定位和浮动这些都是可以实现让元素脱离标准流的，来达到灵活布局的效果
- 浮动可以实现设置的值含有：
  - float: none：默认值，没有浮动效果
  - float: left：元素向左浮动
  - float: right：元素向右浮动

浮动流规则：

浮动规则一：

元素一旦浮动了，那么就会脱离标准流
浮动的元素，会朝着左边或者右边移动，直到贴近自己所在的容器的边界或者说接触到其他浮动元素的边界为止
然后我们的定位元素默认的是层叠在浮动元素的上面，但是是可以通过设置定位元素的z-index < 0 来调整的

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <!-- 开始实现我们的样式的设计 -->
          <style>
            body {
              padding: 0;
              margin: 0;
              background-color: skyblue;
        
              .boxPosition {
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute;
                top: 10px;
                left: 10px;
                z-index: 1;
                /* z-index: 0; */
                /* z-index: -1; */
                /* 
                    这个时候，我们是可以发现的是: 定位元素和浮动元素发生层叠的时候，
                    默认的是，定位元素在上面的
                    但是通过设置 z-index < 0 就可以实现控制定位元素置于浮动元素的下面了
                 */
              }
        
              .boxFloat {
                width: 100px;
                height: 100px;
                background-color: orange;
                float: left;
              }
            }
          </style>
        </head>
        <body>
          <div class="boxPosition"></div>
          <div class="boxFloat"></div>
        </body>
        </html>

浮动规则二：
- 如果是浮动元素，那么左右浮动的时候，浮动元素的左右边界不会超过包含快的左右边界（这些很好理解，结论罢了）
- 但是这个浮动元素依据的边界也只是内容区的边界

浮动布局应用场景
- 用来实现解决行内级元素inline-block 元素的水平间隙问题，这个时候，就是直接把所有的元素向同一方向浮动即可
  - 这个解决的方式还有：通过 flex 布局来实现解决也是一样的
- 或者说还可以页面中一个位置的动态的图，就是下面图片的狗

浮动带来的问题的解决方案看权威网站

高度塌陷问题的解决

首先我们需要注意的就是，我们的实际的开发中，一个盒子的实际的大小是由我们的内容撑大的
但是只不过，当我们的设计的元素的样式的设计的为：浮动流的时候，这个时候的脱标了
这个时候就不会含有向我们的父元素汇报高度，那么接下来的下面的盒子就不会在下面展示，只会在顶部显示
这个时候，我们的解决方式：可以利用我们的CSS属性来实现我们的设置clear 这个可以实现清除浮动
clear 属性可以设置的值：
- left 用来清除的是左浮动带来的高度塌陷问题的影响
- right 用来实现的是清除右浮动带来的高度塌陷问题的影响
- both 左右都请了（开发中常用）
- none 默认值

解决方法1：直接通过：clear 来实现解决

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          body {
            padding: 0;
            margin: 0;
      
            .container {
              width: 800px;
              height: auto;
              margin: 100px auto;
      
              .box_float {
                width: 600px;
                height: 600px;
                background-color: red;
                float: left; 
              }
      
              .box_normal {
                width: 100%;
                height: 100px;
                background-color: skyblue;
                /* 这个时候，我们就会发现出现了高度的塌陷问题 */
                clear: both;  /* 通过这个属性就可以实现清除浮动带来的高度塌陷问题了 */
                /* 在我们的开发中，我们都一直会实现标准流和我们的脱标元素的布局问题的解决 */
              }
            }
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="box_float"></div>
          <div class="box_normal"></div>
        </div>
      </body>
      </html>

解决方法2：通过给已经浮动的元素添加伪元素

      .clear-fix::after, .clear-fix::before {
        content: "";
        clear: both;
        display: block;
          
        /* 开始解决浏览器兼容性问题 */
        visibility: hidden;
        height: 0;  
      }
      
      .clear-fix {
        *zoom: 1;  /* 兼容ie */  
      }

可以自己找找资料来解决我们的浮动流和标准流之间常常出现的问题，以及实现解决