1、给父盒子设置高度
2、给父盒子设置overflow:hidden;
3、给父盒子的最后面加一个div，这个div有个属性：clear:both;
4、使用伪元素清除浮动
.clearfix {
zoom: 1;/*IE/7/6*/ /*兼容IE6下的写法*/
}
.clearfix:after {
content: "";
line-height: 0;
width: 0;
height: 0;
display: block;
visibility: hidden;
clear: both;
}
5、标准流隔断法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.left {
width: 200px;
height: 200px;
background-color: #06f;
border: 1px solid blue;
float: left;
}
.normal {
width: 202px;
height: 300px;
background-color: #f60;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="normal"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
</body>
</html>
效果图：
相关推荐
浮动的属性虽然方便使用，但是在使用这种属性时，也存在着一种弊端，那就是当子元素设置了float属性之后，且父元素的宽度没有设置...所以这里我们说的清除浮动，指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。
解决这个问题，通常需要采用一些技术来“清除浮动”。 1. **清除浮动（Clearing Floats）**： - 最传统的方法是在父容器内部添加一个额外的标签，如`<div class="clear"></div>`，并设置`clear: both;`。这种方法...
在网页设计中，H5（HTML5）是一种现代的标记语言标准，用于构建富媒体、交互性强的网页应用。在本话题中，我们将探讨“H5溢出隐藏”、“缩略图”和“清除浮动”这三大关键概念，以及它们在实际网页布局中的应用。 ...
为了解决这个问题，有多种清除浮动的方法。 1. **传统方法：额外元素清除** 这是最原始的方法，即在父容器内添加一个额外的元素，通常使用`<div class="clear"></div>`，并为其设置样式`clear:both`。这样，这个...
4. 使用CSS伪元素`:before`或`:after`：例如，`::after`配合`content: ""`和`clear: both`，可以清除浮动，且不影响HTML结构，但对旧版本的IE浏览器支持不佳。 5. 父元素浮动：这种方法并不理想，因为它可能引发其他...
同时，为了清除浮动，防止父元素因子元素浮动而高度塌陷，可以添加一个清浮动的元素或者使用CSS的clearfix方法： ```css .clearfix::after { content: ""; display: table; clear: both; } ``` 然后将`....
因此，我们需要“清除浮动”或者说“闭合浮动”，以确保容器能够正确包裹其内的浮动元素。常见的清除浮动方法包括： 1. 添加额外的标签：在浮动元素后面插入一个带有`clear:both`样式的空`div`，这样可以创建一个新...
### CSS清除浮动详解 #### 一、引言 在网页设计与前端开发中，CSS（层叠样式表）是用于定义HTML文档外观的关键技术之一。其中，“清除浮动”是一项非常重要的概念，它解决了布局中常见的一个问题——即由于元素...
- (3) 使用CSS伪类`:after`：在父元素上使用`::after`伪元素，设置`content: ""`和`clear: both`，同样可以达到清除浮动的效果，且不需要额外的HTML元素。 - (4) 使用Flexbox或Grid布局：在现代浏览器中，我们可以...
CSS清除浮动是为了处理浮动元素对周围元素布局的影响，特别是防止父元素因浮动元素而高度塌陷。以下是对清除浮动的几种方法及其规范说明的详细解释： 1. **使用`clear:both`** 当一个元素设置`clear:both`时，这个...
这个“HTML5 Canvas彩色浮动粒子特效.zip”文件包含了一种利用Canvas实现的动态背景效果，使得网页背景充满活力，提升用户体验。在网页设计和开发中，这种特效可以用于增加视觉吸引力，尤其是在音乐播放器、活动页面...
为了解决这个问题，有多种清除浮动的方法。本文将详细介绍其中的六种。 1. **使用浮动(float)**： - `float: left` 或 `float: right` 会使元素向左或向右浮动，从而允许它们在同一行内显示。 - 浮动元素会脱离...
为了解决这个问题，我们需要使用“清除浮动”（clear floats）的方法。以下介绍几种常见的CSS清除浮动的方法： 1. 使用`clear`属性： 这是最基础的清除浮动方式。通过设置`clear`属性，我们可以指定元素不允许与...
这款“HTML5 Canvas浮动彩色粒子背景动画特效”利用了Canvas元素的特性，构建了一个生动且互动的背景效果。下面我们将深入探讨相关的HTML5 Canvas知识点。 1. **HTML5 Canvas基础** HTML5 Canvas是一个基于矢量...
5. 使用表格类元素作为浮动元素的容器：直接使用`<table>`和`<td>`等表格元素，让它们自然地包含浮动内容。 6. 浮动父元素：将父元素也浮动，但这种方法可能导致其他布局问题，一般不推荐。 7. 触发`hasLayout`：...
为了解决这个问题，开发者通常会采用几种不同的清除浮动（clear float）方法。下面我们将详细探讨这些方法的优缺点。 1. **额外元素法** 这种方法是在浮动元素后面添加一个额外的非浮动元素，如`...
清除浮动是确保页面布局正常显示的关键，即使在HTML5时代，这一需求仍然存在，因为W3C标准并没有对这一问题进行根本性的改变。 传统的清除浮动方法通常有两种：一是使用额外的HTML标签，如`<br clear="all">`或添加...