Home >Web Front-end >HTML Tutorial >2016.3.14CSS 浮动第五天_html/css_WEB-ITnose
2016.3.14CSS 浮动第五天_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:24:171035browse
今日课程总览
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS 浮动原理介绍
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
CSS 浮动实例 - 向右浮动的元素
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。
因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
CSS 浮动实例 - 向左浮动的元素
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
CSS float 属性
在 CSS 中，我们通过 float 属性实现元素的浮动。
float 属性定义元素在哪个方向浮动。
以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像：
行框围绕浮动框
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。
clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：
clear 属性
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear 属性定义了元素的哪边上不允许出现浮动元素。
在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。
在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。
不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，
会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
clear 属性实例 - 对行框应用 clear
这是一个有用的工具，它让周围的元素为浮动元素留出空间。
让我们更详细地看看浮动和清理。
假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。
您可能编写下面的代码：
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }<div class="news"> <img src="news-pic.jpg" alt="2016.3.14CSS 浮动第五天_html/css_WEB-ITnose" > <p>some text</p>
</div> 这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：
clear 属性实例 - 对空元素应用清理
不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。
.news {
background-color: gray;
border: solid 1px black;
}
.news img { float: left; }.news p { float: right; }.clear { clear: both; }<div class="news"> <img src="news-pic.jpg" alt="2016.3.14CSS 浮动第五天_html/css_WEB-ITnose" > <p>some text</p> <div class="clear"></div>
</div> 这样可以实现我们希望的效果，但是需要添加多余的代码。
常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。
不过我们还有另一种办法，那就是对容器 div 进行浮动：
.news { background-color: gray; border: solid 1px black; float: left; }.news img { float: left; }.news p { float: right; }<div class="news"> <img src="news-pic.jpg" alt="2016.3.14CSS 浮动第五天_html/css_WEB-ITnose" > <p>some text</p>
</div> 这样会得到我们希望的效果。
不幸的是，下一个元素会受到这个浮动元素的影响。
为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。
这有助于减少或消除不必要的标记。
事实上，W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，
您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。
overflow 属性
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。
如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。
因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
示例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>浮动</title> <style media="screen"> .content { overflow: hidden; } .div1, .div2, .div3 { width: 200px; height: 200px; background-color: cyan; /*向右浮动*/ float: right; } p { background-color: green; /*清除浮动*/ /*clear: both;*/ } </style> </head> <body> <div class="content"> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> </div> <p>p1</p> </body></html> 清除浮动：
未清除浮动：
课堂练习
布局如下图所示页面，规定时间20分钟：
习题答案：（不建议直接照着敲，最好先自己试试）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>练习</title> <style media="screen"> div { font-size: 50px; text-align: center; line-height: 100px; } .top { background-color: cyan; } .top div { float: left; width: 100px; height: 100px; background-color: green; } .middle { clear: both; } .middle .left { float: left; } .middle .right { float: left; } .div6 { width: 300px; height: 100px; background-color: yellow; } .left_middle { width: 300px; /*height: 100px;*/ } .div8 { float: left; width: 150px; height: 150px; background-color: gray; } .div9 { background-color: black; color: white; width: 150px; height: 150px; float: right; } .div11 { clear: both; background-color: red; width: 300px; height: 100px; } .div7 { width: 200px; height: 200px; background-color: rgb(89, 210, 218); } .div10 { width: 200px; height: 150px; background: cyan; } .div8, .div9, .div10 { line-height: 150px; } .div12 { clear: both; width: 500px; height: 100px; background-color: blue; } </style> </head> <body> <div class="top"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="div4">4</div> <div class="div5">5</div> </div> <div class="middle"> <div class="left"> <div class="div6">6</div> <div class="left_middle"> <div class="div8">8</div> <div class="div9">9</div> </div> <div class="div11">11</div> </div> <div class="right"> <div class="div7">7</div> <div class="div10">10</div> </div> </div> <div class="div12">12</div> </body></html> 总结
浮动元素：
1.浮动元素不占父级宽高2.浮动元素都在一行内显示3.浮动元素都可以设置宽高和margin/padding4.浮动元素默认内容撑开宽高5.可以去除浏览器的默认缝隙6.浮动元素标签会发生层叠，但是内容不会
清浮动：
1.clear:both;清除的前一个浮动元素造成的影响，弊端会增加一个元素2.overflow:hidden; 加给浮动元素的父级ps:如果要兼容ie6/7的话要加zoom:1haslayout