这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。
1. 所有的页面元素都可以浮动
2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素
3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了，那么这个浮动的元素的左外边界会停靠在已浮动元素的右外边界
4.如果在div中的多个子div元素都被左浮动,那么，如果这些被浮动的子元素不能被父元素一行所容纳，那么这些浮动的元素会自动换行(这是第三条最后一个规则的例外情况-)
5.浮动元素会尽可能向父元素的顶部停靠，即浮动元素会尽可能的向高位置停靠
6.元素浮动后，不论元素是块级元素，还是行内元素，都会块级元素(第二条规则)，那么对浮动元素设置width属性是有意义的，而且应该为浮动元素添加 width属性，如果不添加width属性，那么width会自动的由原来100%的宽度缩减至刚好容纳内部元素所需要的宽度
7.浮动重叠规则：行内框(如span)与浮动元素重叠时，其边框、背景色、背景图片、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景色、背景图片均在浮动元素之下，而内容在浮动元素之上。
8.浮动元素之间永远不会有折叠，这是第三条和第四条规则的结果。这包括元素框内的相同方向浮动的元素之间不能有重叠，也包括左浮动与右浮动元素之间不能 有重叠。如果一个div内部有两个左浮动元素，其中之一占据大部分空间，那么另外一个左浮动元素只会在剩余的空间里换行找到适合自己的空间在垂直方向上显 示更多的内容，剩余的部分将不能显示(根据父元素的设置决定)
9.浮动元素是块级元素，同普通的块级元素相比，浮动元素的margin-top和上面相邻的元素的margin-bottom在垂直方向上的不会重叠，而普通的块级元素会发生marigin-bottom和margin-top重叠取其较大值的现象
10.同一个元素框内的浮动元素，.后浮动的元素永不会超过先浮动元素的顶端，除非后浮动的元素设置了负的margin-top
11.第三条规则说的是一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果浮动元素设置了负的margin-left，则破坏了这条规则
12.浮动元素的包含块是离它最近的祖先块级节点，包含块指的是浮动元素浮动时的参照物。这和绝对定位的定位参考物不一样，绝对定位参照的是离它最近的带有定位属性(既可以是决定定位，也可以是相对定位)的祖先块级元素
13.当浮动元素的宽度大于容器框的宽度时，这会使得浮动元素超出容器的左右边界：规则是，左浮动时，浮动元素停靠在容器框的左侧而导致右侧超出；右浮动 时，浮动元素停靠在容器框的右侧而导致左侧超出。如果容器设置了overflow:hidden属性，则浮动元素同普通的元素一样，都会将超出的部分隐藏
14.不设高度的父元素框内如果只包含了浮动元素，那么这个父元素框垂直方向上没有被撑开。如果父元素也浮动了，那么父元素框在垂直方向将自动撑开以容纳 它包含的浮动元素。所以我们在使用ul和li制作导航栏时，既可以为ul显式的指定高度，也可以把它也做成左浮动，让它容纳的浮动的li元素将它自动撑开
15.设置了清除浮动(clear:left)的元素，它设置的margin-top将会失效，通常置为0
第五条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div {
height: 400px;
width: 240px;
background-color: pink;
margin: 30px auto;
}
p {
float: left;
width: 100px;
height: 50px;
color: blue;
}
p.higher {
height: 120px;
}
</style>
</head>
<body>
<div>
<p style="background-color: orange;" class="higher">First</p>
<p style="background-color: red;">Second</p>
<p style="background-color: green;">Third<p>
</div>
</body>
</html>
第六条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div {
height: 400px;
width: 240px;
background-color: pink;
margin: 30px auto;
}
p {
float: left;
height: 50px;
color: blue;
}
p.higher {
height: 120px;
}
</style>
</head>
<body>
<div>
<p style="background-color: orange;" class="higher">This is First Element</p>
<p style="background-color: red;">Second</p>
<p style="background-color: green;">Third<p>
</div>
</body>
</html>
第七条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
img.sideline {
float: left;
margin: 10px -15px 10px 10px;
width: 100px;
height: 300px;
}
p.box {
border: 1px solid gray;
padding: 0.5em;
width: 400px;
color: red;
}
p.box span {
background-image: url(images/orangePic.png);
color:blue;
}
p.box strong {
border: 3px double black;
background: silver;
padding: 2px;
}
p.box2 {
border: 1px green solid;
background: silver url(images/orangePic.png) no-repeat;
}
h2#jump-up {
margin-top: -15px;
background: silver;
}
</style>
</head>
<body>
<img src="images/sky2.png" class="sideline">
<p class="box">
<span>This paragraph</span>, unremarkable in most ways, does contain an inline
element. This inline contains some <strong>strongly emphasized text, which is so marked to make an important point</strong>. The
rest of the element's content is normal anonymous inline content.
</p>
<p class="box2">This is a second paragraph. There's nothing remarkable about it,
really. Please move along.</p>
<h2 id="jump-up">A Heading!</h2>
</body>
</html>
第八条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div {
height: 400px;
width: 240px;
background-color: pink;
margin: 30px auto;
}
p {
float: left;
height: 50px;
color: blue;
width: 200px;
height: 50px;
}
p.larger {
float: right;
height: 350px;
width: 200px;
}
</style>
</head>
<body>
<div>
<p style="background-color: orange;" class="larger">This is First Element</p>
<p style="background-color: red;">Second</p>
</div>
</body>
</html>
第九条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
div {
width: 100px;
height: 50px;
margin: 10px;
}
div#div0 {
background-color: silver;
}
div#div1 {
background-color: pink;
}
div#div2 {
background-color: orange;
float: left;
}
div#div3 {
background-color: green;
clear: left;
}
</style>
</head>
<body>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
第十条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div {
height: 400px;
width: 360px;
background-color: pink;
margin: 30px auto;
}
p {
float: left;
width: 100px;
height: 50px;
color: blue;
}
p.first {
height: 120px;
}
p.third {
margin-top: -20px;
}
</style>
</head>
<body>
<div>
<p style="background-color: orange;" class="first">First</p>
<p style="background-color: green;">Second</p>
<p style="background-color: red;" class="third">Third</p>
</div>
</body>
</html>
第十一条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div {
height: 400px;
width: 360px;
background-color: pink;
margin: 30px auto;
}
p {
float: left;
width: 200px;
height: 200px;
color: blue;
margin-left: -20px;
margin-top: -20px;
}
</style>
</head>
<body>
<div>
<p style="background-color: orange;" class="first">First</p>
</div>
</body>
</html>
第十三条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div#outer {
height: 650px;
width: 360px;
background-color: pink;
margin: 30px auto;
/*overflow: hidden;*/
}
div#first {
float: left;
width: 500px;
height: 150px;
color: blue;
background-color: red;
}
div#second {
float: right;
width: 500px;
height: 150px;
color: blue;
background-color: green;
}
div#third {
clear: both;
width: 500px;
height: 150px;
color: blue;
background-color: orange;
}
div#fourth {
width: 150px;
height: 150px;
color: blue;
background-color: silver;
}
</style>
</head>
<body>
<div id="outer">
<div id="first">This is First</div>
<div id="second">This is Second</div>
<div id="third">This is Third</div>
<div id="fourth">This is Fourth</div>
</div>
</body>
</html>
第十四条规则
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div#outer {
float: left;/*Auto expand vertically to contain its children float elements*/
width: 200px;
background-color: pink;
margin: 30px auto;
border: 1px solid green;
}
div#first {
float: left;
width: 80px;
height: 60px;
color: blue;
background-color: red;
}
div#second {
float: left;
width: 80px;
height: 60px;
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<div id="outer">
<div id="first">This is First</div>
<div id="second">This is Second</div>
</div>
</body>
</html>
相关推荐
【CSS3小球浮动按钮】是一种创新的网页交互元素，主要利用了CSS3的强大功能来实现独特的视觉效果。这个按钮并非传统的文字或图形形式，而是由7个小球组成的，每个小球都有逼真的滚动和投影效果，提升了用户体验的...
**一、CSS浮动** 浮动（Float）最初是为了实现图文混排而引入的，但现在已成为构建多列布局的基础。当一个元素被设置为浮动，它会脱离当前的正常流（normal flow），向左或向右移动，直到其边框碰到包含元素的边框...
标题“CSS静止浮动”指的是在网页设计中，如何使用CSS让元素保持在屏幕的某个位置，即使页面滚动，该元素依然固定不动。这通常被称为“固定定位”（fixed positioning）。在描述中提到的“兼容所有浏览器”，意味着...
《纯CSS3浮动小猪动画：打造生动的网页交互体验》 在当今互联网时代，网页设计不仅追求功能的完善，更注重用户体验的提升。而视觉效果则是提升用户体验的关键因素之一。"纯CSS3浮动的小猪动画"就是这样一个创新且...
【标题】"纯CSS3幽灵上下浮动动画特效"是一个基于CSS3技术实现的网页动态效果，它将一个卡通幽灵形象设计成在蓝色背景上上下浮动，为网站增添趣味性和互动性。这个特效主要利用了CSS3的动画属性来创建动态行为，使...
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性，允许页面元素浮动在其他元素旁边。Float 属性可以取四个值：Left、Right、None 和 Inherit。其中，Left 和 Right 分别浮动元素到左边和右边，...
浮动f
CSS浮动是网页布局中一个重要的概念，主要用于创建多列布局。当一个元素被设置为浮动（float:left或float:right），它将从当前的流中移出，向左或向右移动，直到碰到边框或者另一个浮动元素。这个特性在早期网页设计...
在这个“HTML5+CSS3自定义浮动Select超炫下拉菜单动画源码”中，我们将深入探讨如何利用这些技术实现一个创新的下拉菜单。 首先，HTML5中的`<select>`元素通常用于创建选择列表，但其样式控制有限。为了打破这个...
在CSS3中，绘制不规则图形的方法逐渐变得多样化和实用化。这些技术使得网页设计师能够创造出更为复杂的视觉效果，从而提升用户体验。以下是一些主要的CSS3方法，用于创建不规则图形： 1. **shape-outside属性**：这...
在CSS中，元素的浮动和定位是两种关键的技术，用于创建复杂的网页布局。在这个名为“蓝色多瑙河”的浪漫式网页布局案例中，它们被巧妙地结合使用以实现3行2列的布局。这个案例源自喻浩的《DIV+CSS网页样式与布局从...
【标题】"js+css3彩色气泡浮动上升动画特效"是通过JavaScript和CSS3技术实现的一种视觉效果，主要用于创建动态、美观的网页背景。这种特效通常会让网页看起来更具活力和趣味性，吸引用户注意力。 【描述】"基于js+...
在本教程中，我们将深入探讨“CSS系列之浮动博客源码”，这是一份关于如何利用CSS技术构建一个具有图文环绕效果、使用after伪元素以及理解浮动布局的实践项目。通过这个源码，你可以学习到一系列关键的CSS概念，并且...
利用css做了一个浮动框架，这个框架是百分比做的，可以根据浏览器窗口的大小而成比例的伸缩。缺点图像还是不可以的，除了你用一个图像hack
首先，我们来了解CSS3的一些核心特性，这对于创建浮动导航条至关重要： 1. **选择器**：CSS3引入了更强大的选择器，如类选择器、ID选择器、伪类选择器（如`:hover`、`:active`和`:focus`），以及子元素选择器（`>`...
在CSS（层叠样式表）中，权重是一个关键概念，它决定了当多个样式规则应用于同一元素时，哪个规则会胜出并决定元素的最终样式。理解权重对于编写高效的CSS和解决样式冲突至关重要。 首先，我们来详细讲解CSS权重...
在网页设计中，浮动（Float）是CSS布局的重要概念，它允许元素脱离其正常文档流并使其周围的元素围绕它流动。浮动最初是为了处理图像布局而引入的，但随着时间的推移，它已成为创建复杂的网页布局的工具之一。在这个...
本篇文章将深入探讨CSS浮动的原理、用途以及如何在实践中应用。 一、浮动的概念 浮动是CSS中的一个定位属性，由`float`关键字定义，可取值为`left`、`right`或`none`。当一个元素被设置为浮动，它会尽可能地向左或...
css float是一个经常需要使用的css属性，该属性用于设置css块级元素的浮动方向（左右浮动）。本文向码农介绍css float使用方法和实例应用。 Css的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签...