非零基础自学前端最后一遍一 HTML+CSS 16 CSS元素浮动

￡神魔★判官ぃ 2024-03-22 17:13 119阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  16 CSS元素浮动
         *   *  16.1 布局-浮动-认识浮动
             *   *  16.1.1 认识浮动
             *  16.2 布局-浮动-浮动的常见规则
             *   *  16.2.1 浮动规则一
                 *  16.2.2 浮动规则二
                 *  16.2.3 浮动规则三
                 *  16.2.4 浮动规则四
                 *  16.2.5 浮动规则五
             *  16.3 布局-浮动-行内元素的间隙处理
             *   *  16.3.1 行内元素的间隙处理
             *  16.4 布局-浮动-案例01百度页码展示
             *   *  16.4.1 浮动练习一
             *  16.5 布局-浮动-案例02京东商品布局1
             *   *  16.5.1 浮动练习二
             *  16.6 布局-浮动-案例02京东商品布局2
             *   *  16.6.1 浮动练习3
             *  16.7 布局-浮动-考拉多列布局
             *   *  16.7.1 浮动练习四
             *  16.8 布局-浮动-浮动的问题及清除浮动
             *   *  16.8.1 浮动的问题 – 高度塌陷
                 *  16.8.2 CSS属性 - clear
                 *  16.8.3 清除浮动的方法
                 *  16.8.4 方法三 – 伪元素清除浮动
                 *  16.8.5 布局方案总结

![在这里插入图片描述][0d73f99977c440f79370f4727539d12c.png_pic_center]

#### 一 HTML+CSS ####

#### 16 CSS元素浮动 ####

##### 16.1 布局-浮动-认识浮动 #####

###### 16.1.1 认识浮动 ######

*  float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
    
     *  float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
     *  但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;
 *  绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
 *  可以通过float属性让元素产生浮动效果，float的常用取值 、
    
     *  none：不浮动，默认值
     *  left：向左浮动
     *  right：向右浮动

##### 16.2 布局-浮动-浮动的常见规则 #####

###### 16.2.1 浮动规则一 ######

元素一旦浮动后, 脱离标准流

*  朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
 *  定位元素会层叠在浮动元素上面

![在这里插入图片描述][82e9a77c47c344cda1a0a4f439015269.png_pic_center]

<!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>
        .item1,
        .item2 {
         
          background-color: #f00;
        }
    
        .item1 {
         
          /* 脱离标准流 */
          float: left;
          background-color: #0f0;
        }
    
        .item2 {
         
          float: right;
        }
      </style>
    </head>
    
    <body>
      <div class="item1">1</div>
      <div class="item2">2</div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][3be924722fd0453a8be57ca55127fa39.png_pic_center]

来个div 包一下

![在这里插入图片描述][bf2f1251e1dc4689adb9527843137f23.png_pic_center]

没毛病

###### 16.2.2 浮动规则二 ######

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

![在这里插入图片描述][8390c59798594f17bab929fc69620930.png_pic_center]

带圆圈的数字，标记着浮动元素浮动之前的位置

![在这里插入图片描述][90d36d5756724313a81f2d50d8cc3c01.png_pic_center]

###### 16.2.3 浮动规则三 ######

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

渲染效果

![在这里插入图片描述][8a48757fb4cc48318e7f8df1c30b383b.png_pic_center]

###### 16.2.4 浮动规则四 ######

*  浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
    
     *  比如行内级元素、inline-block元素、块级元素的文字内容

![在这里插入图片描述][eb1b5f4527d9452c9de2923ae59dc437.png_pic_center]

渲染效果

![在这里插入图片描述][fb5eae75f96a4ab1b812382c30d9d804.png_pic_center]

一个图文混排的练习

<!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>
        .box {
         
          width: 500px;
          background: orange;
        }
    
        .box img {
         
          width: 300px;
          float: left;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">
        <img src="../images/kobe01.jpg" alt="">
        马俊宝从小热爱摄影，人生中第一部照相机是1978年买的海鸥相机，当时花了他将近半年的积蓄。从拿着相机的那一刻起，他就有一个梦想：把新疆最美的风景记录下来，让更多人看到。这个梦想在他年过半百的时候终于实现了。他的作品经常有爆款，不少视频有上亿观看量。留言里很多人赞叹新疆太美了，也有人不相信这些湖泊草原在新疆。马俊宝很开心：“我想做新疆美景的展示者，把新疆最美的一面展现给大家。”
        为了拍美食，张振新几乎跑遍了全疆，短视频的题材有大家熟悉的，也有粉丝留言推荐的，还有在网上搜索看到的。他会为了拍一种美食，乘飞机转汽车，辗转上千公里。从北疆的糖洋芋、土鸡焖饼子，再到南疆的鸽子汤、烤鱼、烤鸽子，每到一地，张振新都会和当地人聊天，听听当地人会去哪家老字号。他拍的店大多虽不起眼，但都是味道正宗、历久弥新的“宝藏店”。
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][6a8f95f115c94a2abfd78559ccc2b66a.png_pic_center]

###### 16.2.5 浮动规则五 ######

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

![在这里插入图片描述][2895f646a5454e918a97fb6ffe523ab1.png_pic_center]

##### 16.3 布局-浮动-行内元素的间隙处理 #####

###### 16.3.1 行内元素的间隙处理 ######

浮动常用的场景

*  解决行内级元素、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>
        .box {
         
          /* font-size: 0; */
          /* display: flex; */
        }
    
        span {
         
          background-color: orange;
          /* font-size: 16px; */
          /* float: left; */
          /* float: left;
          margin-right: 5px; */
        }
      </style>
    </head>
    
    <body>
      
    
      <div class="box">
        <span>aaa</span>
        <span>bbb</span>
        <span>ccc</span>
      </div>
    
    </body>
    
    </html>

此时的渲染效果

![在这里插入图片描述][0c3f5a354bd34dc0b69c1548ce499ee9.png_pic_center]

其实有四种方法嘛，这里就贴一种，全部设置一个向左浮动

![在这里插入图片描述][7cb9564bbdeb4bc9bacb8044aaab8626.png_pic_center]

##### 16.4 布局-浮动-案例01百度页码展示 #####

###### 16.4.1 浮动练习一 ######

浮动常用的场景

*  解决行内级元素、inline-block元素的水平间隙问题

![在这里插入图片描述][8f0dbd4bb765422abe2f7d8e593119fd.png_pic_center]

<!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>
        /* 样式的重置 */
        ul,
        li {
         
          list-style: none;
          padding: 0;
          margin: 0;
        }
    
        a {
         
          text-decoration: none;
          color: #333;
        }
    
        /* 全局设置 */
        body {
         
          background-color: #f2f2f2;
        }
    
        /* 内容样式 */
        ul>li {
         
          float: left;
          margin-left: 12px;
        }
    
        ul>li>a {
         
          display: inline-block;
          width: 36px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          border-radius: 6px;
          background-color: #fff;
          color: #3951b3;
          font-size: 14px;
        }
    
        ul>li>a:hover,
        ul>li.active>a {
         
          background-color: blue;
          color: #fff;
        }
    
        ul>li.next>a {
         
          width: 80px;
        }
      </style>
    </head>
    
    <body>
    
      
      <ul>
        <li class="item"><a href="#">1</a></li>
        <li class="item"><a href="#">2</a></li>
        <li class="item"><a href="#">3</a></li>
        <li class="item"><a href="#">4</a></li>
        <li class="item active"><a href="#">5</a></li>
        <li class="item"><a href="#">6</a></li>
        <li class="item"><a href="#">7</a></li>
        <li class="item"><a href="#">8</a></li>
        <li class="item"><a href="#">9</a></li>
        <li class="item"><a href="#">10</a></li>
        <li class="item next"><a href="#">下一页 ></a></li>
      </ul>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][9acd5bbbbe024899adfd2ba70c663bbf.png_pic_center]

##### 16.5 布局-浮动-案例02京东商品布局1 #####

###### 16.5.1 浮动练习二 ######

浮动布局方案:

*  实现京东页面下面的布局

![在这里插入图片描述][2b2af276e0504454bf9c136a1a51606e.png_pic_center]

布局效果

![在这里插入图片描述][68f5502826494aa782f378088db12086.png_pic_center]

##### 16.6 布局-浮动-案例02京东商品布局2 #####

###### 16.6.1 浮动练习3 ######

浮动布局方案:

*  实现京东页面下面的布局

![在这里插入图片描述][d929b4a0d92e48ba947e25d12ded461f.png_pic_center]

<!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>
        .content {
         
          width: 1190px;
          margin: 0 auto;
          background-color: #f00;
          height: 1000px;
        }
    
        .wrapper {
         
          margin-right: -10px;
        }
    
        .item {
         
          width: 290px;
          background-color: purple;
          margin-bottom: 10px;
    
          float: left;
          margin-right: 10px;
        }
    
        .item.left {
         
          height: 370px;
        }
    
        .item.right {
         
          height: 180px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="content">
        <div class="wrapper">
          <div class="item left"></div>
          <div class="item left"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
        </div>
      </div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][0be0cc559ae546d89243c64a0e50a767.png_pic_center]

##### 16.7 布局-浮动-考拉多列布局 #####

###### 16.7.1 浮动练习四 ######

浮动布局方案:

*  实现考拉页面下面的布局

![在这里插入图片描述][c18d666473764c18b3763ff1d936bb30.png_pic_center]

布局效果

![在这里插入图片描述][7c4f9e5a18a646888b5fafa16cc05e0a.png_pic_center]

##### 16.8 布局-浮动-浮动的问题及清除浮动 #####

###### 16.8.1 浮动的问题 – 高度塌陷 ######

*  由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
    
     *  父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
 *  解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
 *  清浮动的目的是
    
     *  让父元素计算总高度的时候，把浮动子元素的高度算进去
 *  如何清除浮动呢? 使用clear属性

<!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>
        .content {
         
          width: 1190px;
          margin: 0 auto;
          background: #f00;
        }
    
        .wrapper {
         
          margin-right: -10px;
        }
    
        .item {
         
          width: 290px;
          background-color: purple;
          margin-bottom: 10px;
    
          float: left;
          margin-right: 10px;
        }
    
        .item.left {
         
          height: 370px;
        }
    
        .item.right {
         
          height: 180px;
        }
    
        /* 其他的内容 */
        .other {
         
          height: 100px;
          background: #0f0;
        }
    
        .line {
         
          /* height: 10px; */
          /* background: blue; */
          clear: both;
        }
    
        /* 最终的解决方案 */
        .clear_fix::after {
         
          content: "";
          clear: both;
          display: block;
    
          /* 浏览器兼容 */
          visibility: hidden;
          height: 0;
        }
    
        .clear_fix {
         
          /* IE6/7 */
          *zoom: 1;
        }
      </style>
    </head>
    
    <body>
    
      
      
      <div class="content">
        <div class="wrapper clear_fix">
          <div class="item left"></div>
          <div class="item left"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
    
          
        </div>
      </div>
    
      <div class="content">
        <div class="wrapper clear_fix">
          <div class="item left"></div>
          <div class="item left"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
          <div class="item right"></div>
    
          
        </div>
      </div>
    
      
      <div class="other"></div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][d574cf4640d34727a071e298aa0c3554.png_pic_center]

###### 16.8.2 CSS属性 - clear ######

*  clear属性是做什么的呢?
    
     *  clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
 *  clear的常用取值
    
     *  left：要求元素的顶部低于之前生成的所有左浮动元素的底部
     *  right：要求元素的顶部低于之前生成的所有右浮动元素的底部
     *  both：要求元素的顶部低于之前生成的所有浮动元素的底部
     *  none：默认值，无特殊要求
 *  那么我们可以利用这个特性来清除浮动.

###### 16.8.3 清除浮动的方法 ######

事实上我们有很多方法可以清除浮动

*  方法一: 给父元素设置固定高度
    
     *  扩展性不好（不推荐）
 *  方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both
    
     *  会增加很多无意义的空标签，维护麻烦
     *  违反了结构与样式分离的原则（不推荐）
 *  方法三: 给父元素添加一个伪元素
    
     *  推荐;
     *  编写好后可以轻松实现清除浮动;

###### 16.8.4 方法三 – 伪元素清除浮动 ######

给父元素增加::after伪元素

*  纯CSS样式解决，结构与样式分离（推荐）

![在这里插入图片描述][e7ad84f860324e76a5b400cc5db73d74.png_pic_center]

###### 16.8.5 布局方案总结 ######

![在这里插入图片描述][b123d02beca24d1ea7641c999c4bba6c.png_pic_center]

[0d73f99977c440f79370f4727539d12c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8b14f2d9e525412eb4809ea87d40cb74.png
[82e9a77c47c344cda1a0a4f439015269.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4ef4a41b6ec8485a9edc1ee12f312019.png
[3be924722fd0453a8be57ca55127fa39.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3fa8790463ac417891e954d75eb37c4f.png
[bf2f1251e1dc4689adb9527843137f23.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b4e4915336964111a781e109aad56b07.png
[8390c59798594f17bab929fc69620930.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cbe2ecf1493f441588c2b959371344da.png
[90d36d5756724313a81f2d50d8cc3c01.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f1ff7d2f1bcb4b6fbba4d18afa5cb6ac.png
[8a48757fb4cc48318e7f8df1c30b383b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6c9a611cb420484889a9f5a15ff9fb0b.png
[eb1b5f4527d9452c9de2923ae59dc437.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/929e916be60a49918bbb8303eef46583.png
[fb5eae75f96a4ab1b812382c30d9d804.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0e4952c234fa4f56805704169944ce1c.png
[6a8f95f115c94a2abfd78559ccc2b66a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/792c269bf84f42ff86865e8d9d7a2f14.png
[2895f646a5454e918a97fb6ffe523ab1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6e14bd14f5964a95b93d16fbd8a7af9a.png
[0c3f5a354bd34dc0b69c1548ce499ee9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c8c29435e84f423bb0d2501959254f4f.png
[7cb9564bbdeb4bc9bacb8044aaab8626.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9f46fb84fa4648ed8cda2219a24533d4.png
[8f0dbd4bb765422abe2f7d8e593119fd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9a3ec61fa24e4bf592614db5e951ebf5.png
[9acd5bbbbe024899adfd2ba70c663bbf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ade0895a5dfd48f6a504eb11dadf5967.png
[2b2af276e0504454bf9c136a1a51606e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a07fa8a7bbe346f6b4f38629bf5098a8.png
[68f5502826494aa782f378088db12086.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/46bba3cd96484f7c82c74a3acd2e1242.png
[d929b4a0d92e48ba947e25d12ded461f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2ae9aa3650f6443285e7ed2019da5527.png
[0be0cc559ae546d89243c64a0e50a767.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a78c3756e8c54b198fdab77f882ec3ae.png
[c18d666473764c18b3763ff1d936bb30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/50a1898913fc41069959f1b935b4b65c.png
[7c4f9e5a18a646888b5fafa16cc05e0a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/23fd23de7ac341f68a7fa2bccb9c39b7.png
[d574cf4640d34727a071e298aa0c3554.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cfc9ab5d83be45c18a6ec26d6ab64e01.png
[e7ad84f860324e76a5b400cc5db73d74.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/708616a212224bea8cb36f3db32242d0.png
[b123d02beca24d1ea7641c999c4bba6c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b3ed5119a44d4bceb23cbc8ad0951106.png