浮动-总结

carricss

已于 2022-04-21 22:15:37 修改

阅读量225

点赞数

文章标签：前端

于 2022-04-21 22:14:35 首次发布

本文链接：https://blog.csdn.net/qq_31070029/article/details/124287226

版权

TOC

能够说出浮动的作用
能够说出浮动元素的特点
能够说出常见的清除浮动方法
能够使用浮动完成小米模块案例
能够使用浮动完成网页导航案例

浮动的作用

早期：图文环绕
现在的作用：用于页面布局，让垂直的盒子变成水平布局

<!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>
    img {
      /* 左浮动 */
      float: left;
      margin-right: 20px;
    }

    .left {
      /* 左浮动 */
      float: left;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .right {
      /* 右浮动 */
      float: right;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <!-- 1、图文环绕 -->
   <!-- <img src="./images/1.jpg" alt=""> -->
  前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]  。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 -->

  <!-- 2、网页布局 → 水平布局 -->
  <div class="left">左浮动</div>
  <div class="right">右浮动</div>
</body>
</html>

浮动的特点

1.浮动元素会脱离标准流，浮到空中
2.浮动的元素比标准流高半个等级，可以覆盖标准流中的元素
3.浮动找浮动
小米官网

 .box {
           width: 1226px;
           height: 615px;
           background-color: pink;
       }
        .left {
            float: left; 
            height: 615px;
            width: 234px;   
        }
       .right {
            float: right;
            width: 978px;
            height: 615px;
           }
   <div class="box">
        <div class="left"></div>
        <ul class="right"></ul>
  </div>

在这里插入图片描述
4.浮动元素会受到上边界的影响
5.浮动元素有类似行列块的效果–

可以设置宽高
一行显示多个
注意：浮动元素不能通过text-align:center 或者margin:0 auto;，让浮动元素本身水平居中

小米布局

在这里插入图片描述

<!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>
    /* 去除掉标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }
    
    .box {
      width: 1226px;
      height: 614px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .left {
      float: left;
      width: 234px;
      height: 614px;
      background-color: #800080;
    }

    .right {
      float: right;
      width: 978px;
      height: 614px;
      /* background-color: yellow; */
    }

    .item {
      float: left;
      width: 234px;
      height: 300px;
      background-color: #87ceeb;
      margin-right: 14px;
      margin-bottom: 14px;
    }

    /* 找到的是 第 4 和第 8个 4倍数  4n */
    .item:nth-child(4n) {
      /* background-color: red; */
      margin-right: 0;
    }

    /* 找到从第5个开始往后的所有个子元素 */
    .item:nth-child(n+5) {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <!-- 布局流程：从上往下，从外往内 -->
  <div class="box">
    <div class="left"></div>
    <div class="right">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</body>
</html>

网页导航显示案例：

网页导航显示案例

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
           /* 1、找到ul，去除小圆点 */
        ul {
            list-style: none;
        }
        /* 2.块元素水平排布 */
        ul li {
            float: left;
            /* width: 80px;
            height: 50px; */
            text-align: center;
        }
        /* 3、找到a标签，设置宽高 */
       ul li a {
            float: left;
            width: 80px;
            height: 50px;
            background-color: #ffc0cb;
            line-height: 50px;
            font-style: 16px;
            text-decoration: none;
            color: #fff5eb;
        }
      ul li a:hover {
            background-color: #008000;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">新闻1</a></li>
        <li><a href="#">新闻2</a></li>
        <li><a href="#">新闻3</a></li>
        <li><a href="#">新闻4</a></li>
        <li><a href="#">新闻5</a></li>
        <li><a href="#">新闻6</a></li>
        <li><a href="#">新闻7</a></li>
        <li><a href="#">新闻8</a></li>
    </ul>
</body>
</html>

清除浮动

含义：q清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素
原因：子元素浮动脱标
目的：需要父元素有高度，从而不影响页面布局
清除浮动的方法：

1.在父元素内容的最后添加一个块级元素；给添加的块级元素设置clear:both
2.单伪元素清除法

.clearfix::after {
content:'';
display:block;
clear:both;
}

3. 双伪元素清除法
（还可以解决margin塌陷问题）

  .clearfix::after,
        .clearfix::before {
            content: '';
            display: table;
        }
   .clearfix::after {
            clear: both;
    }

4.直接给父元素设置 overflow:hidden
（还可以解决margin塌陷问题）

carricss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动-总结

这里写目录标题浮动的作用浮动的特点三级目录浮动的作用早期：图文环绕现在的作用：用于页面布局，让垂直的盒子变成水平布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
复制链接

扫一扫