你不加clear:both在火狐,IE8中打开！！肯定是不行的foot会浮上去！！！但在IE6,7是显示正常页面！！
而加了clear:both浏览器所显示的效果都一致了(IE5没试)！！
代码没改就是放到一个页面里你试试
<html>
<head>
<title> New Document </title>
<style type ="text/css">
#head{width:100%; height:20px; background:#789;}
#left{float:left; width:200px; height:300px; background:#823;}
#right{float:right; width:200px; height:300px; background:#399;}
#foot{clear:both; width:100%; height:20px; background:#789;}
</style>
</head>
<body>
<div id="head">head</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="foot">footer</div>
</body>
</html>
分享到：
相关推荐
此外，随着CSS Flexbox和Grid布局的普及，`float`和`clear`的使用在某些情况下逐渐减少。Flexbox和Grid提供了更强大、更现代的布局解决方案，可以更轻松地实现复杂的网页布局，而无需依赖浮动。 总结来说，`float`...
本文主要是讲解如何在 html 中使用 clearfix 和 clear，针对那些刚开始了解 css 的童鞋。关于 clearfix 和 clear 的样式在这里我就不写了。 下面就谈谈对于这两个 class 的用法，首先我们先看个例子： XML/HTML Code...
7. 在现代的CSS布局中，为了更优雅的解决清除浮动的问题，也有使用诸如clearfix hack的方法，它通过伪元素选择器来清除浮动而不必添加额外的DOM元素。 通过以上知识点，我们可以了解到CSS的clear属性在处理浮动元素...
在CSS布局中，`clear`属性是一个至关重要的概念，它用于处理元素与浮动元素的关系，确保元素不会被周围的浮动元素影响其布局。当一个元素设置为`clear`时，它会在自身周围创建一个“清除区域”，这个区域不会被指定...
本文档提供了CSS的基础语法与一些常用的属性介绍，包括如何引入样式、选择器的使用方法以及各种CSS属性的具体解释。通过这些基础知识的学习，可以更好地理解和掌握CSS的用法，从而更加灵活地控制网页的布局和样式。...
CSS中的`clear`属性是用于解决浮动元素（`float`属性设置为`left`或`right`的元素）引起的布局问题，特别是当这些浮动元素的父容器没有固定高度（`height`设置为`auto`）时。浮动元素会导致它们的父容器高度无法自动...
CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签，以及其对应的属性和用法。 字体属性（Font） * font-family：定义文本的字体系列...
Clear: 清除扫描结果,当我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始其他的扫描. AutoScan: 我们的网站可能会有很多的页面,...
为了解决这一问题，可以在后续元素上使用`clear:both`，或者在浮动元素之后添加一个空的`div`，并为其添加`clear:both`。 #### 八、去除选中框 - **Outline属性**：当元素（如输入框）获得焦点时，默认会有一个轮廓...
5. **定位**：CSS提供了相对定位（`position: relative`）、绝对定位（`position: absolute`）和固定定位（`position: fixed`）等方法，使得元素可以脱离正常文档流并精确控制其位置。 6. **浮动**：`float`属性...
**CSS2.0中文手册**是前端开发领域中不可或缺的参考资料，它详尽地阐述了CSS（层叠样式表）2.0规范的所有特性和用法。CSS2.0是Web设计的重要里程碑，引入了许多至今仍广泛使用的功能，极大地提升了网页的外观和布局...
10. **CSS API**：在压缩包中的`CSS_API`可能包含关于如何在JavaScript中操作和修改CSS样式的API介绍，例如`getComputedStyle`，`style`对象和CSSOM（CSS Object Model）相关方法。 这个手册对于前端开发者来说是...
解决这个问题的一种方法是使用`clearfix`类或者其他方法来清除浮动，而不是依赖`clear`属性。`clearfix`通常是一个CSS类，通过应用到包含浮动元素的父容器上，可以使父容器自动扩展以包含所有浮动的子元素，避免高度...
水平居中可以用`margin: auto`，垂直居中则有多种方法，如Flexbox的`align-items: center`，CSS Grid的`align-items: center`，或者使用绝对定位配合`transform`。 8. **什么是CSS预处理器（如Sass, Less）？** ...
1. **基本布局**：使用Div实现网格系统，例如两栏或三栏布局，展示如何通过CSS浮动（float）和清除（clear）控制元素的位置。 2. **定位**：通过CSS的position属性（static、relative、absolute、fixed）来精确控制...
本教程通过实例详细讲解Div+CSS的使用方法。 首先，Div标签在网页布局中的主要作用是创建一个容器，可以包含文本、图像、链接或其他HTML元素。它的优点在于可以通过CSS来灵活调整其大小、位置和样式，使得网页结构...
本教程将深入探讨CSS用法及基础，帮助初学者快速上手，并逐渐精通CSS。 ### 1. CSS基本结构 CSS的基本结构由选择器和声明组成。选择器用于定位HTML元素，如`div`或`p`；声明则包含属性和值，如`color: red;`，用来...