目录
1. 起源
2. 语法
2.1. float
2.2. clear
3. 性质
3.1. 浮动
3.2. 清除浮动
4. 经典案例
4.1. 首字下沉
5. 几道笔试题
1. 起源
最初,引入 float 属性是为了能让 web 开发人员实现文字环绕效果(例如:报纸排版)。
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
p {
line-height: 2;
word-spacing: 0.1rem;
}
img {
float: left;
margin-right: 30px;
}
</style>
</head>
<body>
<h1>Simple float example</h1>
<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>
</html>
2. 语法
2.1. float
2.2. clear
3. 性质
3.1. 浮动
性质1:使用 CSS 浮动元素的独特之处是,浮动的元素基本上算是处在单独的平面上,但是对文档中其余的内容仍有影响。
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
width: 10em;
border: solid aqua;
}
span {
float: left;
width: 5em;
height: 5em;
border: solid blue;
}
</style>
</head>
<body>
<p>
<span> </span>
Supercalifragilisticexpialidocious
</p>
</body>
</html>
性质2:不管元素是什么类型,浮动后得到的都是块级框。
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#myfloat {
float: left;
}
</style>
</head>
<body>
<span id="myfloat">冰寒雾气弥漫的环境之中,周围白雾弥漫,始终都望不见尽头。</span>
</body>
</html>
性质3:浮动元素四周的外边距不折叠。
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
float: left;
}
.item1 {
border: 2px solid blue;
background-color: grey;
}
.item2 {
border: 2px solid green;
background-color: purple;
clear: left;
}
</style>
</head>
<body>
<div class="item1">
</div>
<div class="item2">
</div>
</body>
</html>
性质4:浮动元素与常规流动的内容出现重叠时(例如:负外边距)
示例a:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.item1{
width: 100px;
height: 100px;
float: left;
background-color: red;
}
.item2{
margin-left: -50px;
background-color: green;
}
</style>
</head>
<body>
<span class="item1">
冰寒雾气弥漫的环境之中,周围白雾弥漫,始终都望不见尽头。
</span>
<span class="item2">
老人抬头一脸震惊的望着半空中的少年,低喝道:“小子,你这是何种秘法?”
</span>
</body>
</html>
示例b :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.item1{
width: 100px;
height: 100px;
margin-left: 50px;
margin-right: -50px;
float: left;
background-color: red;
}
.item2{
background-color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div class="item1">
冰寒雾气弥漫的环境之中,周围白雾弥漫,始终都望不见尽头。
</div>
<div class="item2">
老人抬头一脸震惊的望着半空中的少年,低喝道:“小子,你这是何种秘法?”
</div>
</body>
</html>
性质5:浮动元素的后代也浮动时,将扩大范围,涵盖浮动的后代元素。
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
border: 2px solid blue;
}
p {
float: left;
}
p {
border: 2px solid red;
width: 30px;
height: 30px;
background-color: grey;
}
</style>
</head>
<body>
<div id="mydiv">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
<button onclick="mytoggle()">Toggle Div's float</button>
<script>
var toggle = true;
function mytoggle(){
toggle = !toggle;
var div = document.getElementById("mydiv");
div.style.cssFloat = toggle ? "left" : "none";
}
</script>
</body>
</html>
性质6:浮动元素的细节规则。
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
margin: 0;
border: 2px solid blue;
}
p:nth-child(1){
width: 100px;
}
p:nth-child(2){
float: left;
background-color: grey;
border: 2px solid red;
}
</style>
</head>
<body>
<p>A</p>
<p>B</p>
<p>C</p>
</body>
</html>
示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
border: 2px solid black;
}
.myfloat {
float:left;
border:2px solid red;
margin: 1em;
color: red;
}
</style>
</head>
<body>
<div>
凶魂的逃跑意图,并未实现,纳戒之中的天火尊者似乎对它势在必得一般,奇异强芒暴涌间,吸力成倍翻张,而那凶魂,也是开始传出一阵阵凄厉而惊恐的尖叫之上,身体犹如那被按在石板上即将待宰的野猪一般,拼了命的挣扎。
望着那死命想要逃窜,但却距纳戒越来越近的凶魂,萧炎心中在欣喜之余,也不免有些震惊,没想到天火尊者在这般状态下,居然还能施展出这么一手,看来他对于自己,是隐瞒了一些东西啊,至少,并非是如同他所说,已经不具备半点自保的能力...
<span class="myfloat">FLOAT</span>
能够将一名实力达到斗宗阶别的凶魂这般轻易的制住,萧炎自认是难以达到,虽然这之中不排除是否天火尊者有着一些对付这种凶魂的独有法门,但不管何种法门,也是需要一些保底的力量,所以,虽说如今的天火尊者看似状态很是虚弱,但谁若是真对其心生歹意的话,恐怕倒霉的。只会是他自己...
就在萧炎心中念头翻转间,那天空上的轩护法,也是对于凶魂此刻的处境有所察觉,当下一声怒吼,手印一动,强横的灵魂力量自黑雾中暴涌而出!
随着轩护法的插手,那凶魂的抗拒也是越来越强,到得后来,居然是开始逐步的退出那股吸力的吸扯范围!
</div>
</body>
</html>
3.2. 清除浮动
性质:在 CSS1 和 CSS2 中,clear 起作用的方式是增加元素的上外边距,把元素移到浮动的元素下方。因此,为元素声明的上外边距其实会被忽略。然而,CSS2.1 引入了间距(clearance)这个概念,间距是为了把元素向下移动,确保显示在移动元素的下方而在元素上外边距上方增加的额外留白。这意味着,清除了浮动的元素,其上外边距不再受到影响。
你品,你细品
技巧:借助清除浮动“解决”高度塌陷。
A. 方式1,借助空 div 元素:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#mydiv {
border: 2px solid blue;
}
p {
float: left;
}
p {
border: 2px solid red;
width: 30px;
height: 30px;
background-color: grey;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div id="mydiv">
<p>A</p>
<p>B</p>
<p>C</p>
<div class="clearfix"></div>
</div>
</body>
</html>
B. 方式2,借助 ::after 伪元素,可以省略 html 标记:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
border: 2px solid blue;
}
div::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
p {
float: left;
}
p {
border: 2px solid red;
width: 30px;
height: 30px;
background-color: grey;
}
</style>
</head>
<body>
<div id="mydiv">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
</body>
</html>
4. 经典案例
4.1. 首字下沉
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p:first-letter{
float: left;
border: 1px solid black;
padding: 2px;
font-size: 40px;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<p>
突如其来的刺眼强光。几乎将那天际之上的阳光给遮掩而去,
不少人也是因为这般变故而有些愣神,一道道惊疑不定的目光,投向天空。
萧炎的拳头,与那凶魂悍然相接,但那由白色纳戒之中所爆发而起的奇异强芒,
却是犹如一层能量罩般,将凶魂拳上的那股可怕劲道,尽数抵御,然后,
一股强悍的吸力,自其中暴涌而出!
</p>
</body>
</html>
5. 几道笔试题
题目01:
题目02:
参考:
《CSS 世界》 《CSS核心技术详解》 《CSS权威指南 第四版 下册》 Floats: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats float: https://developer.mozilla.org/en-US/docs/Web/CSS/float clear: https://developer.mozilla.org/en-US/docs/Web/CSS/clear W3C——Floats: https://www.w3.org/TR/CSS22/visuren.html#floats All About Floats: https://css-tricks.com/all-about-floats/ How To Clear Floats Without Structural Markup: http://www.positioniseverything.net/easyclearing.html CSS Float Theory,Things You Should Know: https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/ The Mystery Of The CSS Float Property: https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/