关于css清除浮动的几种方法

最新推荐文章于 2024-05-05 20:21:31 发布
最新推荐文章于 2024-05-05 20:21:31 发布
阅读量230 收藏
点赞数
分类专栏： CSS3 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/st521314mt/article/details/107056982
版权

清除浮动的方式：

  1. 给前面一个父元素设置高度
  2. 给后面的盒子添加clear属性
  3. 隔墙法：其又分为外墙法和内墙法
  4. 利用伪元素选择器清除浮动
  5. 利用overflow: hidden清除浮动

下面一一介绍： 

1、给前面一个父元素设置高度

注意点：在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>65-清除浮动方式一</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            height: 20px;
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

 2、给后面的盒子添加clear属性

clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素

注意点：当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效

 代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>66-清除浮动方式二</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            border: 1px solid #000;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            clear: both;
            margin-top: 28px;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>
<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

3、 隔墙法：其又分为外墙法和内墙法

外墙法
  在两个盒子中间添加一个额外的块级元素
  给这个额外添加的块级元素设置clear: both;属性

注意点:
  外墙法它可以让第二个盒子使用margin-top属性
  外墙法不可以让第一个盒子使用margin-bottom属性

 

内墙法
  在第一个盒子中所有子元素最后添加一个额外的块级元素
  给这个额外添加的块级元素设置clear: both;属性

注意点:
  内墙法它可以让第二个盒子使用margin-top属性
  内墙法它可以让第一个盒子使用margin-bottom属性

 

外墙法和内墙法区别?
  外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

注意点: 

  在企业开发中不常用隔墙法来清除浮动

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>67-清除浮动方式三</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*margin-bottom: 10px;*/
        }
        .box2{
            background-color: green;
            /*margin-top: 10px;*/
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
        .wall{
            clear: both;
        }
        .h20{
            height: 20px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
    <div class="wall h20"></div>
</div>

<!--<div class="wall h20"></div>-->

<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

4、利用伪元素选择器清除浮动

其中关于伪类选择器的解释：

什么是伪元素选择器?
   伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素


利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

代码如下：

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>69-清除浮动方式四</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*margin-bottom: 10px;*/
        }
        .box2{
            background-color: green;
            /*margin-top: 10px;*/
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
        .box1::after{
            /*设置添加的子元素的内容为空*/
            content: "";
            /*设置添加的子元素为块级元素*/
            display: block;
            /*设置添加的子元素的高度为0*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear: both;*/
            clear: both;
        }
        .box1{
            /*兼容IE6*/
            *zoom:1;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
</div>

<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
</body>
</html>

5、 利用overflow: hidden清除浮动

其中关于overflow: hidden的作用介绍：

  1.1 可以将超出标签范围的内容裁剪掉
  1.2 清除浮动
  1.3 可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>70-清除浮动方式五</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            overflow: hidden;
        }
        */
        /*
        .box1{
            background-color: red;
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
        */
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            /*border: 1px solid #000;*/
            overflow: hidden;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<!--
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>

</div>

<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>
-->
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

 

唯爱伊vae
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS清除浮动的六种方法
zwj_553的博客
03-22 224
清除浮动的六种方法 布局页面的时候，如果父标签是标准流，而子标签都是浮动流，在父元素没有定义高度的情况下，父元素就会被子元素的浮动挡住，或者说，父元素无法被撑开，这种时候就需要清除浮动。 方法一：隔墙法，通过在最后一个浮动元素后面添加带有clear属性的标签来清除浮动（有些公司会用这种方法） .clear-fix { clear: both; } <div> <div style="float: left"></div> <div style=
CSS清除浮动的四种方法
晓晓涛的博客
12-23 1092
CSS清除浮动的四种方法第一种：使用div空标签法第二种：父元素使用overflow: hidden第三种：伪元素选择器:after第四种：伪元素选择器:before + after 第一种：使用div空标签法 <head> <style> .left, .right { float: left; width: 200px; height: 200px; background-color: blue; } .test { width: 500px;
CSS - 浮动布局（float）
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
CSS float 浮动属性详解
Dandan的前端开发---专注于div css js jquery
03-19 2934
什么是 CSS float ？ float 是 CSS 的定位属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。 在网页设计中，应用了 CSS 的 float 属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本
CSS浮动（float）
热门推荐
屈帅波的技术博客
05-26 1万+
一 传统网页布局的三种方式 网页布局的本质：用 CSS 来摆放盒子，把盒子摆放到相应位置。 CSS 提供了三种传统布局方式（简单说就是盒子如何进行排列）。 普通流（标准流） 浮动 定位 这里指的只是传统布局，其实还有一些特殊高级的布局方式。 二 标准流（普通流/文档流） 所谓的标准流：就是标签按照规定好的默认方式排列。 块级元素会独占一行，从上向下顺序排列。 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式
css浮动(float）详解
weixin_45123004的博客
02-23 2638
浮动详解 一、什么是浮动？ 浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象。 二、如何产生浮动？ 给元素本身添加float属性 float： 值 作用 left 元素向左浮动 right 元素向右浮动 none 默认值。元素不浮动，并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承 float 属性的值 三、浮动有...
CSS中的Float（浮动）
最新发布
GZM888888的博客
05-05 1286
Float是CSS中的一种布局方式，它允许元素脱离正常的文档流，并向左或向右浮动。Float属性最初是为了实现文字环绕图片的效果而设计的，但现在已经被广泛应用于网页布局中。
CSS清除浮动大全共8种方法
12-13
css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。...
css清除浮动的几种方法以及对应规范说明
09-25
CSS清除浮动是为了处理浮动元素对周围元素布局的影响，特别是防止父元素因浮动元素而高度塌陷。以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个...
css清除浮动的几种方法和示例
01-19
}】，设置了clear属性的元素，其上边框会紧贴着浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置。 复制代码代码如下:.divcss5{ width:400px;border:1px solid #F00;background:#FF0} .divcss5-left,.div...
HTML/HTML5/CSS/CSS3题目
CIA的博客
08-11 2832
1、下面关于渐变的说法正确的是 A A 可以通过百分比控制颜色分布比例 B 渐变的颜色不能超过4种 C 因为渐变有平铺,所以不需要背景平铺 D 如果使用渐变需要在背景属性的前面加浏览器前缀 2、关于包含块的说法正确的是 A A 包含块是绝对定位的基础,包含块就是为绝对定位元素提供坐标,偏移和显示范围的参照物 B 包含块就是相对定位 C 包含块就是嵌套 D 包含块是绝对定位 3 、表单字段集标签是 D A <field></field> B <in
CSS浮动
White_1_7的博客
06-22 191
css浮动属性
CSS float详解
嘿嘿
12-19 8014
一、float 1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认...
CSS浮动文摘
08-02 485
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 写在前面的话： 由于CSS内容比较多，没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。 本文以div元素布局为例。 教程开始： ...
HTML基础二 测试题
qq_37169559的博客
11-06 4601
HTML5 一、单选题（共30题，每题2分） 得分：2.0分 1. 以下哪个元素不是行内块元素?( ) A textarea B div C img D input 正确答案: B 解析: 题目问的是哪个不是行内块，textarea、img、input都是；div是块元素 得分：2.0分 2. 以下哪个选项不属于web标准 A 结构 B...
CSS中的浮动float
weixin_52629158的博客
04-03 467
如果我们在项目开发中，不给浮动的元素设置宽度，我们可以使用padding-left和padding-right。让元素在页面中有实际占有的宽度（li元素中里面的文本内容的宽度+左内边距+右内边距）。（3）标准文档流中的行元素，设置浮动之后，当前这个元素就可以设置宽度和高度了。1）如果没有足够的空间，同时 第2个元素高度比第一个元素小，那么第3元素会贴在第1个元素的后面显示。2）如果没有足够的空间，同时 第2个元素高度比第一个元素大，那么第3元素会贴左墙显示。一个元素设置浮动，紧挨着它的元素不设置浮动。
CSS基础——浮动（float）【学习笔记】
lilien的博客
11-21 2253
1. 浮动(float) 1.1 CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 浮动 让盒子从普通流中浮起来,主要作用让多个块级
web前端学习（二十四）——CSS3浮动属性（float）、清除浮动属性（clear）的相关设置
★★光亭★★
02-04 9606
web前端学习（二十四）——CSS3浮动属性（float）、清除浮动属性（clear）的相关设置
CSS 学习-1. Float(浮动)
qq_27371025的博客
05-09 3296
前言 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），用在图片附近可以实现文字环绕的效果，也可以使用在布局上。 Float 浮动 什么是浮动？浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象。 浮动语法：float：none、left、right； 值和描述： none：元素不浮动（默认值） left：元素向左浮动 right：元素向右浮动 浮动特性： 浮动元素会脱离标准流（脱流）. 浮动的盒子不在保留原先的位置
css中清除浮动的几种方式
04-05
1. 使用clear属性，给浮动元素的下一个元素添加clear属性，可以清除浮动。例如：clear:both; 2. 使用overflow属性，给浮动元素的父元素添加overflow属性，可以清除浮动。例如：overflow:hidden; 3. 使用伪元素：在浮动元素的父元素中添加一个空的伪元素，使用clear属性清除浮动。例如：.clearfix::after {content:""; display:block; clear:both;} 4. 使用display属性，给浮动元素的父元素添加display属性为inline-block或table，可以清除浮动。例如：display:inline-block; 或 display:table; 5. 使用float属性，给浮动元素的父元素添加float属性，可以清除浮动。例如：float:left; 或 float:right;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值