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 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7672
15
1393
52
1206
24
91
11
73
19
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까?
Apr 04, 2025 pm 11:30 PM
웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...
Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?
Apr 04, 2025 pm 11:54 PM
GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...
CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까?
Apr 05, 2025 am 06:15 AM
이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...
HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구
Apr 09, 2025 am 12:12 AM
HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
