P41-前端基础-clear解决受浮动元素的影响而改变位置

最新推荐文章于 2023-12-25 15:36:46 发布

Bruce小鬼

最新推荐文章于 2023-12-25 15:36:46 发布

阅读量648

点赞数

分类专栏：最美前端 # 前端【H5+Css3】

本文链接：https://blog.csdn.net/m0_38039437/article/details/112908607

版权

最美前端同时被 2 个专栏收录

202 篇文章 32 订阅

订阅专栏

前端【H5+Css3】

93 篇文章 10 订阅

订阅专栏

P41-前端基础-clear解决浮动元素的影响而改变位置

1.概述

问题描述

使用块元素设计页面布局，当A块元素设置浮动后，离开了文档流。相邻的块元素B受浮动的影响会改变原有的位置，移动到A元素位置。

解决方案

clear就是用来解决某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响

2.clear介绍

clear

作用：清除浮动元素对当前元素所产生的影响
可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧

原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>clear</title>

  <style>
    div {
      font-size: 30px;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: yellow;
      float: left;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: tomato;
      float: right;
    }

    .box3 {
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 
                由于box1的浮动，导致box3位置上移
                    也就是box3收到了box1浮动的影响，位置发生了改变

                如果我们不希望某个元素因为其他元素浮动的影响而改变位置，
                    可以通过clear属性来清除浮动元素对当前元素所产生的影响

                clear
                    - 作用：清除浮动元素对当前元素所产生的影响
                    - 可选值：
                        left 清除左侧浮动元素对当前元素的影响
                        right 清除右侧浮动元素对当前元素的影响
                        both 清除两侧中最大影响的那侧

                    原理：
                        设置清除浮动以后，浏览器会自动为元素添加一个上外边距，
                            以使其位置不受其他元素的影响
             */
      clear: both;
    }
  </style>
</head>

<body>
  <div class="box1">1</div>

  <div class="box2">2</div>

  <div class="box3">3</div>
</body>

</html>