CSS清除浮动的方法整合

最新推荐文章于 2024-04-12 05:51:26 发布
最新推荐文章于 2024-04-12 05:51:26 发布
阅读量463 收藏 1
点赞数 1
分类专栏： css 文章标签： css html 时代
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26964289/article/details/51303209
版权 
之前学习css过程中遇到css浮动的问题，现在将css清除浮动方法整合如下：
浮动没清除时代码跟效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>给盒子设置height清除浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        /*div不设置高*/
        div{
            border: 1px solid red;
        }
        li{
            float: left;
            width: 80px;
            height: 30px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
            <li>框架</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>英语</li>
            <li>数学</li>
            <li>化学</li>
            <li>生物</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述

1.下面给div添加高度，清除浮动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>给盒子设置height清除浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        div{
            /*给div增加高度清除浮动*/
            height: 100px;
            border: 1px solid red;
        }
        li{
            float: left;
            width: 80px;
            height: 30px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
            <li>框架</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>英语</li>
            <li>数学</li>
            <li>化学</li>
            <li>生物</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述

2.使用clear:both;属性清除浮动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>给盒子设置height清除浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        div{
            border: 1px solid red;
        }
        li{
            float: left;
            width: 80px;
            height: 30px;
            background: green;
        }
        .box2{
            clear: both;
            /*这种方法margin失效*/
            /*margin-top: 10px;*/
        }

    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
            <li>框架</li>
        </ul>
    </div>

    <!-- 给后面的盒子增加clear:both属性清除浮动 -->
    <div class="box2">
        <ul>
            <li>英语</li>
            <li>数学</li>
            <li>化学</li>
            <li>生物</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述
注意：此方法的缺陷是margin属性失效。

3.使用隔墙法清除浮动：即是在两盒子之间增加一个盒子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>给盒子设置height清除浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        div{
            border: 1px solid red;
        }
        li{
            float: left;
            width: 80px;
            height: 30px;
            background: green;
        }

        .cl{
            clear: both;
        }
        .h1{
            height: 10px;
            /*IE6的hack：用于处理IE6的微型盒子兼容性问题*/
            _font-size:0;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
            <li>框架</li>
        </ul>
    </div>

    <!-- 增加一个div如一堵墙,此方法margin也失效,但可以给div增加一个高来替代margin的作用-->
    <div class="cl h1"></div>

    <div class="box2">
        <ul>
            <li>英语</li>
            <li>数学</li>
            <li>化学</li>
            <li>生物</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述
注意：此方法margin也失效，但可以通过增加“墙”的高度来达到margin的效果。且此方法父元素不能被儿子元素撑出高

4.内墙法清除浮动：即是将“墙”移到上一个div内部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>给盒子设置height清除浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        div{
            border: 1px solid red;
        }
        li{
            float: left;
            width: 80px;
            height: 30px;
            background: green;
        }

        .cl{
            clear: both;
        }
        .h1{
            height: 10px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
            <li>框架</li>
        </ul>
    </div>

    <!-- 增加一个div如一堵墙,此方法margin也失效,但可以给div增加一个高来替代margin的作用-->
    <div class="cl h1"></div>

    <div class="box2">
        <ul>
            <li>英语</li>
            <li>数学</li>
            <li>化学</li>
            <li>生物</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述
注意：此方法跟“隔墙法”类似，但该方法能撑出高。

5.给父元素增加overflow:hidden;属性来清除浮动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>给盒子设置height清除浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        div{
            border: 1px solid red;
            overflow: hidden;
            /*IE6不兼容overflow:hidden;属性，使用_zoom解决此问题*/
            _zoom:1;
        }
        li{
            float: left;
            width: 80px;
            height: 30px;
            background: green;
        }
        /*此方法margin生效*/
        .box2{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>html</li>
            <li>css</li>
            <li>js</li>
            <li>框架</li>
        </ul>
    </div>

    <div class="box2">
        <ul>
            <li>英语</li>
            <li>数学</li>
            <li>化学</li>
            <li>生物</li>
        </ul>
    </div>
</body>
</html>

这里写图片描述
注意：该方法IE6不兼容，需用_zoom:1;属性使IE6兼容，并且该方法margin生效。

以上是清除浮动的方法，仅供参考~！

北极宝宝
关注
专栏目录
Web前端知识CSS（清浮动的方法、CSS精灵图、滑动门）
m0_72686827的博客
08-05 153
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容。...
CSS中盒子样式设置及浮动特性
yoghurt&girl的博客
06-06 2405
在CSS3中我们新增了圆角边框样式，这样我们可以使盒子变为圆角。注意：默认的是外阴影，但是不可以写outset这个单词，否则会造成外阴影无效。盒子阴影不占用空间，不会影响盒子的排列。 效果图： 在CSS3中我们可以通过box-sizing来指定盒子模型，它有两个属性值，content-box、border-box。盒子计算分为了两种情况：box-sizing：content-box（盒子大小）：width+padding+border 以前盒子默认大小组成border-sizing：border
八种方法处理CSS浮动问题
阿送
06-04 2839
清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 下面总结8种清除浮动的方法（测试已通过 ie chrome
header问题：css清除浮动方法
99的博客
01-30 477
问题：写微博页面时，header的外层显示有问题。 HTML和css代码结构： 1 2 3 .outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .div1{width: 80px;height: 80px;background
css清除浮动方法大全
且听风吟
03-06 433
CSS清除浮动是每一位web前端工程师都要掌握的技术，也是让每一位刚入门的前端工程师感到头疼的问题，下面就来讲一下CSS清除浮动的原理和各种解决方法，大家可以根据实际情况选择最佳的解决方案。 在用DIV+CSS布局时通常都会用到浮动（float）来完成页面布局，浮动（float）会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及
html清除浮动有几种方法,几种css 清除浮动的方法
weixin_35918994的博客
06-19 138
1、采用伪类:after进行后续空制的高度位零的伪类层清除2、采用css overflow:auto的方式撑高3、采用css overflow:hidden的方式产生怪异适应4、采用display:table将对象变成table形式5、采用div标签，以及css的clear属性6、采用br标签，以及css的clear属性7、采用br标签，以及其自身html的clear属性粗略的看，他们都能将问题解...
Css 清除浮动的几种方法
weixin_47297095的博客
08-21 340
Css清除浮动的几种方法1. 为什么添加浮动2. 为什么清除浮动 1. 为什么添加浮动 在 html 中 的元素分为: 块级元素、行内元素，行内块元素、行内元素，html 中的块级元素都是单独一行显示的，有的时候我们需要它们并列一行显示就需要浮动 2. 为什么清除浮动 因为浮动脱离了文档流，会影响 ...
前端开发面试题整合（css、js、vue。react等）
06-29
2. 写出清除浮动影响的几种方法？ 有三种方法可以清除浮动影响： * 使用 overflow 来清除浮动的影响 * 使用额外标签法，在浮动的盒子之下再放一个标签，在这个标签中使用 clear:both，来清除浮动对页面的影响 * ...
清浮动的方法
asdfgv2022的博客
08-03 3184
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容。...
HTML+CSS部分知识点整合（结合案例实际运用归纳）
m0_46799664的博客
09-11 541
HTML+CSS制作静态页面第一部分 基础知识HTML各个标签的分类以及用途行内元素丶块级元素以及行内块元素合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 第一部分 基础知识 HTML各个标签的分类以及用途 HTML的众多标签可以分为两大类
CSS清除浮动
LFXZ603的博客
05-14 1049
本质 为什么清除浮动：是为了解决 父级元素因为子级元素浮动 引起内部高度为0 的问题（父亲不方便给高度因而一开始没有指定高度，当子级元素没有浮动时子级元素的大小会撑开父级元素，但当子级元素浮动时子级元素脱标，不再占用位置导致父级元素高度为0） 清除浮动的方法 CSS样式属性 使用 clear：right或left或both（多数为both） 额外标签法：W3C推荐的方法，通过在最后一个浮动元...
CSS-21.清除浮动的常用方式（隔墙法）
别忘了缩进的博客
01-30 907
隔墙法： 外墙法： 1.在两个盒子中间添加一个额外的块级元素 2.给这个额外添加的块级元素设置clear:both;属性 注意点：外墙法它可以让第二个盒子使用margin-top属性 外墙法不可以让第一个盒子使用margin-bottom属性 内墙法： 1.在第一个盒子中所有子元素最后添加一个额外的块级元素 2.给这个额外添加的块级元素设置clear:bot
CSS清除浮动的五种方法(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-23 1万+
浮动的原理是让图片脱离文档流，直接浮在桌面上。我们一般布局的时候都是只设置宽度不设置高度，让内容来自动填充高度。但使用浮动后会让原本填充的高度消失，父元素高度为0，后续添加内容布局会产生混乱,造成高度塌陷,这时候就可以利用清除浮动来解决父元素高度塌陷的问题。解决方法一(clear),解决方法二(overflow:hidden),解决方法三(给父元素添加高度),解决方法四(额外标签法),解决方法五(使用after伪元素清除浮动)
css清除浮动的几种方式
潮汐未见潮落的博客
05-30 1万+
CSS 清除浮动的几种常用方法
CSS清除浮动五种方式详解
wshwsh_的博客
07-27 2204
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
CSS清除浮动的三种方法【前端开发】
最新发布
2301_79655473的博客
04-12 1221
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取。
CSS清除浮动的六种方法
若水弹丸之地
03-16 2890
六种方法中，推荐使用第三种。 1、父级div定义 height 原理：手动设置父级div的height，解决了父级div无法自动获取高度的问题。 缺点：只适合高度固定的布局，如果高度和父级div不一样时，会产生问题 &lt;style type="text/css"&gt; .box{background: red; /*解决代码*/ height: 100px; }...
CSS清除浮动的三种方法【前端开发】，web前端设计与开发
2301_79099606的博客
04-03 678
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
css清除浮动的四种方法(详细)
weixin_45842954的博客
06-01 1万+
css清除浮动的四种方式
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值