CSS 학습의 플로팅에 대한 자세한 소개
기사 CSS Study Notes 05 표시 속성에서 우리는 div가 블록 요소이며 다음과 같이 div의 너비가 작더라도 자체적으로 한 줄을 차지한다는 것을 알고 있습니다.
표시 속성의 인라인 적용 속성을 사용하면 div가 div와 행을 공유할 수 있습니다. 이 방법 외에 이 효과를 얻을 수 있는 다른 방법이 있습니까? 대답은 '예'입니다. 아래에서 소개할 CSS의 기능. 플로팅(Floating)은 말 그대로 떠서 움직이는 것을 의미합니다. 그러면 누가 떠 있고 누가 움직이는가? 계속 읽어보시면 곧 답을 찾으실 수 있을 것입니다.
요소의 부동은 부동 속성이 설정된 요소가 표준 문서 흐름의 제어에서 벗어나 표준 흐름 위에 떠 있다는 것을 의미합니다. 요소가 부동된 후에는 표준 흐름에서 분리되지만 여전히 표준 흐름의 레이아웃에 영향을 미칩니다.
CSS에서 float는 float 속성을 통해 정의됩니다. 기본 구문 형식은 다음과 같습니다: selector {float: 속성 값;}, 기본값은 없음(플로팅 아님)이고 왼쪽은 왼쪽을 나타내는 데 사용됩니다. Floating, 이는 이해가 됩니다. Floating 후 왼쪽으로 배열한다는 것은 Right가 오른쪽으로 Floating한다는 뜻이고 당연히 오른쪽으로 배열된다는 의미입니다.
이제 float를 div2로 설정하고 어떤 효과가 나타나는지 살펴보겠습니다
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮动</title> 6 <style type="text/css"> 7 .div1 {background-color: red; height: 50px; width: 400px;} 8 .div2 {background-color: blue; height: 100px; width: 100px; float: left;} 9 .div3 {background-color: gray; height: 150px; width: 400px;}10 .div4 {background-color: green; height: 30px; width: 600px;}11 </style>12 </head>13 <body>14 <div class="div1">div1</div>15 <div class="div2">div2</div>16 <div class="div3">这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3</div>17 <div class="div4">div4</div>18 </body>19 </html>
这时候div2的位置并没有变化，而div3向上移动了，与div2共用一行，相当于div2不占用页面的空间了，不过影响了div3中的文字布局。从这里也可以清楚的看出，是浮动的对象div2先漂浮起来，然后后面的对象div3会向它原来的位置动起来，这也解答了刚开始提出的问题。
浮动是将块元素独占一行的行为取消，将这个块从原来的文档流模式中，可以理解为它飘起来了，它原来的地方就空出来了，它的内容分离出来，这样它后面的对象就当它不存在了。
接下来给div3也设置一下浮动，会有什么意想不到的结果出现吗？
这时，由于div2与div3同时设置了浮动，所以都脱离了标准流，因此div4向上移动与div1组成了一个新的标准流，而浮动的元素是“浮”在标准流的元素之上的，所以div4被div2，div3挡住了一部分。
从上面的现象可以看出，给div3设置浮动之后，div3是紧接着跟在div2后面的，但是div2也是设置了浮动的，可是div2并没有跟在div1后面，这里可以得出一个结论：
浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐（也就是紧挨着上一个元素的后面），如果一行放不下，A元素则会被挤到下一行；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
假如把div4也设置成左浮动，效果如下
我们来一起分析一下，首先看div4，它的上一个元素div3设置了左浮动，所以div4的顶部与div3的顶部对齐，接着看div3，div3的上一个元素div2也设置了左浮动，所以div3的顶部与div2的顶部对其，现在看div2，div2的上一个元素是div1，但是div1并没有设置浮动属性，属于标准流，所以div2的顶部与div1的底部对齐。
或许有人会想如果要让div4独占一行，该怎么办？这就需要用到CSS的清除浮动，清除浮动的关键字是clear，它有如下几个值
再来看div2设置左浮动的现象
因为div3的上一个元素div2设置了左浮动，所以div3占据了元素div2的空间，因为div3的宽高比div2的宽高都大，所以div3被div2挡住了一部分，我们知道标准流中的元素都是没有设置浮动属性的，所以需要清除掉div2元素浮动给div3造成的影响，由于div2是左浮动，因此为div3清除左边的浮动
现象与原来没有设置浮动一样，好，现在div2与div3同时设置左浮动，我想应该可以比较容易的知道如何让div4独占一行了。
清除浮动其他属性值可以自行类推并测试出来。有了上面的基础，我们就可以做出以下比较常见的网页布局。
1 <!DOCTYPE html> 2
<html lang="en"> 3 <head> 4
<meta charset="UTF-8"> 5
<title>常见布局</title> 6
<style type="text/css"> 7
.head {background-color: red; height: 50px; width: 500px;} 8
.sidebar {background-color: blue; height: 200px; width: 100px; float: left;} 9
.main {background-color: gray; height: 200px; width: 400px; float: left;}10
.foot {background-color: green; height: 30px; width: 500px; clear: left;}11
</style>12 </head>13 <body>14 <div class="head">head</div>15
<div class="sidebar">sidebar</div>16
<div class="main">main</div>17
<div class="foot">foot</div>18 </body>19 </html>위 내용은 CSS 학습의 플로팅에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7557
15
1384
52
83
11
59
19
28
96
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
