(前端)html与css css 18、清除浮动

清除浮动

1、浮动存在的问题

a) 浮动的元素不能撑高父级，代码↓

<!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>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            border: 10px solid #999;
        }
        .box div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图↓

元素脱离标准流之后，不能再撑高他的父级盒子。

b) 浮动会影响后面浮动的元素，代码↓

<!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>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            border: 10px solid #999;
        }
        .box div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

我又加了一个box，正常想到的效果图↓

实际效果图↓

如果后面的元素浮动方向相同，他会去贴上一个浮动最后一个元素的边。

2、清除浮动方法

a) 给父盒子添加高度

给父级元素增加高度，它内部的浮动元素被限制了范围，不会影响后面的元素浮动，代码↓

<!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>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            height: 150px;
            border: 10px solid #999;
        }
        .box div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图↓

效果：解决了父级高度的问题，解决了浮动影响后面浮动的问题。

存在的问题：高度还是不能自适应。

b) 清除浮动属性clear

元素都可以设置一个clear的属性，用来清除浮动的作用。

属性值：left、right、both(两边)

作用：clear整体表示清除自身受到的其他元素带来的浮动的影响。

left：清除受到左浮动的影响。

right：清除受到右浮动的影响。

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>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px;
            border: 10px solid #999;
        }
        .box1{
            clear: left;
        }
        .box div,.box1 div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图↓

解决：浮动的互相影响。

存在的问题：父盒子还是不能被子盒子撑高，margin如果小于中间浮动的子元素的高度，margin显示效果失效，代码↓

<!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>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px;
            border: 10px solid #999;
                        /*这里设置了一个margin的属性 20px*/
            margin-bottom: 20px;
        }
        .box1{
            clear: left;
        }
        .box div,.box1 div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图及控制台图解↓

发现并没有变化。

c) 隔墙法

隔墙法：在互相影响的元素中间加一道墙，阻隔开两边的元素，墙上面加一个clear属性。

外墙法：

在有浮动元素的父盒子之间隔一道墙，添加两个类，一个清除浮动，一个模拟外边距，代码↓

<!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>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px;
            border: 10px solid #999;
            margin-bottom: 20px;
        }
        .box div,.box1 div{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
        .cl{
            clear: both;
        }
        .he{
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="cl he"></div>
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

解释：在class名为box和box1的盒子之前在加一个名为cl 和he 的盒子，就将cl这个盒子看成一道墙，然后单独给这道墙单独设置clear属性和height属性，在这里的height是模拟间距的效果，效果图↓

解决：浮动的互相影响。

存在的问题：高度自适应，margin失效。

内墙法：

将清除浮动的墙放在有浮动元素的父盒子内部的最后，只要有浮动就在盒子内部加一道墙，代码↓

<!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>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box,.box1{
            width: 700px;
            border: 10px solid #999;
            margin-bottom: 20px;
        }
        .box .fl,.box1 .fl{
            float: left;
            width: 100px;
            height: 100px;
            background: gold;
            margin-right: 10px;
        }
        .cl{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="cl"></div>
    </div>
    <div class="box1">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="cl"></div>
    </div>
</body>
</html>

解释：在父盒子内部的最后添加了名为cl的盒子，然后cl单独设置clear属性。

效果图↓

解决：浮动互相影响，高度自适应，margin失效。

原文地址：https://www.cnblogs.com/StevenSunYiwen/p/11254390.html

时间： 2024-08-03 17:15:28

(前端)html与css css 18、清除浮动的相关文章

CSS基础之清除浮动

CSS基础之清除浮动本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝赐教.以下是我总结的三种行之有效而且比较简单实用的方法. 一.父级div定义伪类 :after 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

css用clearfix清除浮动

什么是.clearfix .clearfix:after { content: "."; /*内容为"."就是一个英文的句号而已.也可以不写.*/ display: block; /*加入的这个元素转换为块级元素.*/ clear: both; /*清除左右两边浮动.*/ visibility: hidden; /*可见度设为隐藏.注意它和display:none;是有区别的.visibility:hidden;仍然占据空间,只是看不到而已:*/ line-heig

前端之旅HTML与CSS篇之清除浮动塌陷

以下内容为转载. 方法1:给浮动的元素的上级添加高度如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动.只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了.所以只需要给li的上级ul或者div设置一个height:40px:(只要是浮动元素的上级元素就可以.),那么第二个div就好挤下来,在第一个盒子下面显示出来.方法2:clear:both;但是在实际开发过程当中中,高度height很少出现.为什么?因为能被内容撑高!那也就

ife任务刷题总结（一）－css reset与清除浮动

本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初学者也可以按照他们的任务列表,进行刷题.虽然ife名义上是针对初学者,但是我看了一下任务列表,那些任务还并不是那么简单.所以很适合初学者把任务刷一遍,我觉的,把这些任务都刷完,那么前端算是入门了. 对于代码学习来讲,除了实际的去敲,还有其他更好的学习方法吗?因此我计划按照ife的任务都刷一遍,代码提

Css学习之清除浮动的方法详解

本文和大家分享的主要是css中浮动清除相关内容,一起来看看吧,希望对大家学习css http://www.maiziedu.com/course/web/有所帮助. 当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. #div { background-color: blu

css为什么要清除浮动？

这两天在写静态网页,对清除浮动有一些疑问.查阅<精通css>解决了问题. 1 <div class="nav_cont"> 2 <h3>手机通讯</h3> 3 <ul class="navCont_list "> 4 <li><a href="#">全部手机</a></li> 5 <li><a href="#&q

CSS float 与清除浮动

CSS浮动规则: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 浮动1: 设置float : right,元素脱离文档流并向上向右移动,直到它的右边缘碰到包含块的右边缘. 浮动2: 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘. 因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失. 浮动3: 如果把所有三个框都向

css技巧：清除浮动

1.常用方法——overflow 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1. 不过不能和position配合使用,因为超出的尺寸的会被隐藏. overflow:auto会在内部宽度超过父元素时出现滚动条. 在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果. 2.终极方法——伪元素如果遇到水平排列列表需要

css 三（清除浮动专题）

1. 三个关于浮动的概念不浮动float:none; 清除周围的浮动元素 float:both 这是清除浮动的本意清除子元素浮动对父元素的影响 clearfix 很多人都理解成这个叫清除浮动.. 2. 什么是清除浮动清除浮动不是把当前标签的浮动给清除了,如果这样,还加浮动做什么其实清除浮动指的是清楚当前元素旁边的浮动元素,但是当前元素又不能影响别人,打不赢就跑,所以自己就跑到下面去了. 3. 为什么要清楚浮动在布局的时候我们经常希望某些内容能够水平排布,水平排布后,

css中clearfix清除浮动的用法及其原理示例介绍

clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: block; /**//*加入的这个元素转换为块级元素.*/ clear: both; /**//*清除左右两边浮动.*/ visibility: hidden; /**//*可见度设为隐藏.注意它和display:none;是有区别的.visibility:hidden;仍然占据空间,只是看不到而已:*/ l