热题 css渲染页面之浮动(清除浮动)

linsir 一啵叶

已于 2023-06-03 18:01:54 修改

阅读量150

点赞数 2

文章标签： html5 css 前端

于 2023-04-07 12:50:35 首次发布

本文链接：https://blog.csdn.net/qq_53165476/article/details/130006334

版权

得分点：脱离文档流、盒子塌陷、影响其他元素排版、伪元素、‘overflow:hidden’、标签插入法

标准回答：浮动的作用... 、设置浮动元素的特点(利与害)... 、清除浮动的方法...

加分回答：三种清除浮动的特点和影响...

以下是我的个人理解与详细说明：

CSS 布局 - -浮动和清除

float 属性规定元素如何浮动。

clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

float 属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置），默认值。
inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果

<html lang="en">

<head>
    <title>Document</title>
    <style>
        img {
            width: 150px;
            height: 150px;
            float: right;
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <h1>向右浮动</h1>
    <p>在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>
    <p>
        <img src="./images/Mn.jpg" alt="美女图">
        当地时间4月6日中午，韩国市民团体代表来到位于首尔市龙山区的总统府前举行抗议集会，
        呼吁禁止日本福岛核电站核污染水排入大海。示威民众手举标语，上面写有“反对核污染水
        排海”“海洋面临危机”“我们需要安全的世界”“海洋不是垃圾桶”等内容。同一天，韩国最
        大的在野党共同民主党多名国会议员启程前往日本东京以及福岛等地实地考察核污染水处理进展。
    </p>
</body>

</html>

浮动的作用：

1、设置浮动的图片，可以实现文字环绕图片。

2、设置了浮动的块级元素可以排列在同一行，且无缝隙。

3、设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

浮动的特点：

1、设置了浮动，该元素脱标。元素不再占有原来位置--浮动可以进行模式转换（不管原先是什么模式的元素，添加浮动之后具有行内块元素相关特点）

2、设置浮动，使盒子脱离文档流，如果父级元素没有设置高宽，需要被子盒子撑开，那么这时候，父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。

【注意：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流】

为什么要清除浮动：

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0 时，就会影响下面的标准流盒子。

方法一：clear 属性（额外标签法）

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

用法：在浮动元素末尾添加一个标签(必须是块级元素)设置其样式 clear: both; 清除浮动不给后面元素带来影响

 <div style="clear: both;"></div>

缺点：添加许多无意义的标签，结构比较差

方法二：给父级添加overflow

属性值有：hidden 、auto、scroll

//父盒子
  .box {
            overflow: hidden;
        }

缺点：不能显示溢出部分内容，如果父级元素有定位，元素超出父级，超出部分会隐藏

方法三：通过 ::after伪元素法

给浮动元素的父元素，设置伪元素，通过伪元素清除浮动

.parent::after {
    /* 申明样式 */
    content: "";
    clear: both;
    /* 将伪元素转换为块元素，使正常清理浮动 */
    display: block;
}

伪元素清除浮动，不会新增标签，不会有其他影响，是当下比较流行的方法

方案四：给父元素指定合适高度（简单粗暴）

浮动布局典型示例：

代码实现：

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .leftfix {
    float: left;
  }

  .rightfix {
    float: right;
  }

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

  .container {
    width: 960px;
    /* auto 默认只计算左右边距（可结合定位实现垂直问题） */
    margin: auto;
    text-align: center;
  }

  .logo {
    width: 200px;
  }

  .banner1 {
    width: 540px;
    margin: 0 10px;
  }

  .banner2 {
    width: 200px;
  }

  .logo,
  .banner1,
  .banner2 {
    height: 80px;
    background-color: #ccc;
    line-height: 80px;
  }

  .menu {
    height: 30px;
    background-color: #ccc;
    margin: 10px 0;
    line-height: 30px;
  }

  .item1,
  .item2 {
    width: 368px;
    height: 198px;
    border: 1px solid black;
    line-height: 198px;
    margin-right: 10px;
  }

  .item3,
  .item4,
  .item5,
  .item6 {
    width: 178px;
    height: 198px;
    border: 1px solid black;
    line-height: 198px;
    margin: 10px 10px 0 0;
  }

  .item7,
  .item8,
  .item9 {
    width: 198px;
    height: 128px;
    line-height: 128px;
    border: 1px solid black;
  }

  .item8 {
    margin: 10px 0;
  }

  .footer {
    height: 60px;
    background-color: #ccc;
    margin-top: 10px;
    line-height: 60px;
  }
</style>

<body>
  <div class="container">
    <!-- 头部 -->
    <div class="page-header clearfix">
      <div class="logo leftfix">logo</div>
      <div class="banner1 leftfix">banner1</div>
      <div class="banner2 leftfix">banner2</div>
    </div>
    <!-- 菜单 -->
    <div class="menu">菜单</div>
    <!-- 内容区 -->
    <div class="content clearfix">
      <!-- 左侧 -->
      <div class="left leftfix">
        <!-- 上 -->
        <div class="top clearfix">
          <div class="item1 leftfix">栏目一</div>
          <div class="item2 leftfix">栏目二</div>
        </div>
        <!-- 下 -->
        <div class="bottom clearfix">
          <div class="item3 leftfix">栏目三</div>
          <div class="item4 leftfix">栏目四</div>
          <div class="item5 leftfix">栏目五</div>
          <div class="item6 leftfix">栏目六</div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right rightfix">
        <div class="item7">栏目七</div>
        <div class="item8">栏目八</div>
        <div class="item9">栏目九</div>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer ">页脚</div>
  </div>
</body>

linsir 一啵叶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
热题 css渲染页面之浮动(清除浮动)

脱离文档流、盒子塌陷、影响其他元素排版、伪元素、‘overflow:hidden’、标签插入法：浮动的作用... 、设置浮动元素的特点(利与害)... 、清除浮动的方法...：三种清除浮动的特点和影响...
复制链接

扫一扫