web前端学习笔记5

2024-05-01 20:46:04
开发
11

5. float浮动

5.0 代码地址

https://gitee.com/qiangge95243611/java118/tree/master/web/day05

5.1 float的概念

CSS中的 **float **属性用于指定元素如何浮动，指的是一个元素沿着其父级元素的左侧或右侧排列。
当一个元素被浮动时，它被从正常的文档流中取出并向左或向右移动，允许文本和其他元素环绕它。

5.2 float属性值

float属性可以是以下值之一:

left:元素向左浮动。
right:元素向右浮动。

5.3 float特点

脱离文档流 ：浮动元素会脱离正常的文档流，因此不再占据页面中原有的位置，而是向左或向右浮动。
文字环绕：浮动元素会导致其他元素和文本绕着它周围排列，这主要用于实现文字环绕图片等效果。
父级元素塌陷：其他元素的位置会受到浮动元素的影响，特别是在没有正确清除浮动的情况下，可能导致父容器塌陷或布局错乱。

5.3.1 左浮动

html部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>图片左浮动</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      .box {
       
        border: 1px solid #000;
        padding: 20px;
      }
      .box > div {
       
        border: 1px dashed red;
        margin-bottom: 10px;
        padding: 10px;
        margin-right: 10px;
      }
      .box > .layer01 {
       
        float: left;
      }
      .box > .layer02 {
       
        border-color: blue;
        float: left;
      }
      .box > .layer03 {
       
        border-color: green;
        float: left;
      }
      .box > .layer04 {
       
        border-color: #000;
        font-size: 12px;
        line-height: 25px;
        margin-bottom: 0;
      }
      img {
       
        display: block;
      }
      .clear {
       
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="layer01"><img src="./img/photo-1.jpg" alt="日用品" /></div>
      <div class="layer02"><img src="./img/photo-2.jpg" alt="图书" /></div>
      <div class="layer03"><img src="./img/photo-3.jpg" alt="鞋子" /></div>
      <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

效果图

5.3.2 左右浮动

html部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>左右浮动</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      * {
       
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      a {
       
        text-decoration: none;
        color: #000;
      }
      .box {
       
        width: 750px;
        padding: 20px;
        background-color: #ddd;
        margin: 0 auto;
      }
      .title {
       
        border: 1px solid #fff;
      }
      .title h3 {
       
        float: left;
      }
      .title .more {
       
        float: right;
      }
      .title .clear {
       
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="title">
        <h3>热门活动</h3>
        <div class="more"><a href="#">更多</a></div>
        <!-- 1. 空div清除浮动 -->
        <div class="clear"></div>
      </div>
    </div>
  </body>
</html>

效果图

5.4 clear属性

CSS中的clear属性用于控制容器中浮动元素的行为。下面是“clear”属性的详细解释:

clear属性指定元素的哪一侧不允许使用浮动元素。
它可以有以下值:
- none:未清除任何一方。
- left:元素必须移动到任何左侧浮动元素的下方。
- right:元素必须移动到任何浮动右元素的下方。
- both:元素必须移动到任何浮动元素的下方(左或右)。
clear属性主要是用于清除浮动，避免父级元素塌陷。

5.5 overflow属性

CSS中的overflow属性用于控制内容溢出其包含元素时发生的情况。overflow属性可以使用几个值:

visible: 默认值。内容不会被剪切，可以在内容框之外呈现。
hidden: 超出元素框的内容被剪切而不呈现。
scroll: 截断溢出内容，并添加滚动条以允许用户滚动内容
auto: 类似于滚动，但只在必要时添加滚动条。

5.6 解决父级元素塌陷

5.6.1 固定高解决塌陷

代码实现

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>固定高清除浮动</title>
    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css" />
    <style>
      .box {
       
        background-color: #ddd;
        margin: 0 auto;
        width: 750px;
        padding: 10px;
        /* 2. 固定高度解决父级元素塌陷 */
        height: 41px;
      }
      p:nth-of-type(1) {
       
        float: left;
      }
      p:nth-of-type(2) {
       
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>p左浮动</p>
      <p>p右浮动</p>
    </div>
  </body>
</html>

效果图

5.6.2 空div解决塌陷

代码实现

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>空div清除浮动</title>
    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css" />
    <style>
      .box {
       
        background-color: #ddd;
        margin: 0 auto;
        width: 750px;
        padding: 10px;
      }
      p:nth-of-type(1) {
       
        float: left;
      }
      p:nth-of-type(2) {
       
        float: right;
      }
      .clear {
       
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>p左浮动</p>
      <p>p右浮动</p>
      <!-- 1. 空div解决父级元素塌陷 -->
      <div class="clear"></div>
    </div>
  </body>
</html>

效果图

5.6.3 overflow解决塌陷

代码实现

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>overflow清除浮动</title>
    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css" />
    <style>
      .box {
        background-color: #ddd;
        margin: 0 auto;
        width: 750px;
        padding: 10px;
        /* 3. 溢出隐藏，解决父级元素塌陷 */
        overflow: hidden;
      }
      p:nth-of-type(1) {
        float: left;
      }
      p:nth-of-type(2) {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>p左浮动</p>
      <p>p右浮动</p>
    </div>
  </body>
</html>

效果图

5.6.4 伪类元素解决塌陷

代码实现

<!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>伪类元素清除浮动</title>
    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" />
    <link rel="stylesheet"<

原文地址:https://blog.csdn.net/hanq2016/article/details/138345531 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1785651900650229760.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部