用 float 属性,可以实现元素(文字、图片等)的浮动显示功能,通过下面几个实例来展示浮动布局的效果以及浮动布局带来的一些问题?
<!-- index.html -->
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<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>
<img src="https://learn-anything.cn/微波炉.jpg" alt="微波炉">
<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>
</body>
</html>
<!-- index.html -->
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<title>浮动布局 - 字体</title>
<style>
p {
width: 400px;
margin: 0 auto;
}
p::first-line {
text-transform: uppercase;
}
p::first-letter {
font-size: 3em;
border: 1px solid black;
background: red;
float: left;
padding: 2px;
margin-right: 4px;
}
</style>
</head>
<body>
<p>This is my very important paragraph.
I am a distinguished gentleman of such renown that my paragraph
needs to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3 column layout wrong order</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
div:nth-of-type(1) {
width: 36%;
float: left;
}
div:nth-of-type(2) {
width: 30%;
float: right;
margin-left: 4%;
}
div:nth-of-type(3) {
width: 26%;
float: right;
}
</style>
</head>
<body>
<h1>3 column layout wrong order</h1>
<div>
<h2>First column</h2>
<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. </p>
</div>
<div>
<h2>Second column</h2>
<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.</p>
</div>
<div>
<h2>Third column</h2>
<p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod
lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra
pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent
dapibus eros vel mi pretium, nec convallis nibh blandit. </p>
</div>
</body>
</html>
浮动布局也会产生一些非预期行为。
float布局,会影响后面的元素的排列,可以通过 clear 属性,进行清除。取消下面代码中的注释部分,即可看到修正后的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Float disaster</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
div:nth-of-type(1) {
width: 36%;
float: left;
}
div:nth-of-type(2) {
width: 30%;
float: left;
margin-left: 4%;
}
div:nth-of-type(3) {
width: 26%;
float: right;
}
/* 取消下面注释,即可看到 footer 回到预期最底部的位置 */
/* footer {
clear: both;
} */
</style>
</head>
<body>
<h1>Float disaster</h1>
<div>
<h2>First column</h2>
<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. </p>
</div>
<div>
<h2>Second column</h2>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est,
posuere sit amet dapibus ut, facilisis sed est. </p>
</div>
<div>
<h2>Third column</h2>
<p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod
lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra
pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent
dapibus eros vel mi pretium, nec convallis nibh blandit. </p>
</div>
<footer>
<p>©2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you
wish.</p>
</footer>
</body>
</html>
增加了 border 会改变元素的整体大小,会导致整个布局乱掉。可以用 box-sizing
使得 padding 和 border 包含在 元素内部,同时增加 空div 来消除 float的影响。取消下面注释的代码,即可看到效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed layout border-box</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
div:nth-of-type(1) {
width: 36%;
float: left;
}
div:nth-of-type(2) {
width: 30%;
float: left;
margin-left: 4%;
}
div:nth-of-type(3) {
width: 26%;
float: right;
}
.column,
footer {
padding: 1%;
border: 2px solid black;
background-color: red;
}
footer {
clear: both;
}
/* 取消下面注释,可以看到修正后效果 */
/* .clearfix {
clear: both;
}
* {
box-sizing: border-box;
}
footer {
margin-top: 4%;
} */
</style>
</head>
<body>
<h1>Fixed layout border-box</h1>
<div class="column">
<h2>First column</h2>
<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>
</div>
<div class="column">
<h2>Second column</h2>
<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>
</div>
<div class="column">
<h2>Third column</h2>
<p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod
lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra
pharetra.
Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros
vel mi
pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et
porta
scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a
quam
posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at
lorem vel
sollicitudin.</p>
</div>
<!-- 取消下面注释,可以看到修正后效果 -->
<!-- 用空的div来清除 float 对下面 footer 影响,是推荐做法 -->
<!-- <div class="clearfix"></div> -->
<footer>
<p>©2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you
wish.
</p>
</footer>
</body>
</html>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。