2016.3.14CSS 浮动第五天_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

2016.3.14CSS 浮动第五天_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:24 AM

今日课程总览

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

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/imghwm/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/imghwm/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/imghwm/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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

See all articles