2016.3.14CSS 浮动第五天_html/css_WEB-ITnose
今日课程总览
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
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="/static/imghw/default1.png" data-src="news-pic.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="news-pic.jpg" class="lazy" 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="/static/imghw/default1.png" data-src="news-pic.jpg" class="lazy" 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
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
