浮动主要有两种用法：
- 实现一种环绕效果
- 页面布局
环绕效果
<style type="text/css">
h3 {
text-align: center;
}
img {
float: right;
padding: 0 0 1em 1em;
}
</style>
<body>
<h3>文本环绕图片</h3>
<p>
<img src="http://p1.gexing.com/G1/M00/82/FE/rBACJlV5ErKgqpJ_AAAXUoh_0AA677_200x200_3.jpg?recache=20131108">
sdaf sdafh sdaf lsadfh saldfh lasdf asdf alshdf sdaf sdaf sdafh sda flhsadf sadfh asdlfh asdlf ahsdf asldfh sadf sadfas dflsda fsadfl sadf adsf sdfa lasdf hadsf sdaf sdaflas dfas dfa sdfhasd fa sdfalsdf sad slkadfn asdfl adsfhl fds fashfjkdas fsa df asflsa dflsdah sadhfa sdflchsdajhfshdfwheiuuisdlkjahfuiw sdaflhsd sdafh sdal sadflsd fasdhlf d asdfhlsd jhweiuhiunsweqhpjdslkh f</p>
</body>
页面布局
<style type="text/css">
#nav {
float: left;
width: 200px;
height: 200px;
border: 5px solid yellow;
}
section {
margin-left: 210px;
height: 200px;
border: 5px solid #d64078;
}
</style>
<body>
<nav id="nav">
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</nav>
<section>
<p>第一个片段,设置外左边距离,让它给导航留出空间</p>
<p>浮动具有继承特性，所以在浮动元素后的元素都按照统一方式浮动</p>
</section>
<section>
<p>第二个片段,也是按照左边浮动的额</p>
</section>
</body>
image.png
浮动产生的问题1：清除浮动
前面的浮动会导致后面的元素受到影响（也成为浮动的）,如果后面我们不希望它继续浮动，可以清除掉
<style type="text/css">
#left-float {
float: left;
height: 200px;
width: 30%;
border: 5px solid gold;
}
</style>
<body>
<div id="left-float">
左浮动
</div>
<div>
未清除浮动时
</div>
</body>
image.png
<style type="text/css">
#left-float {
float: left;
height: 200px;
width: 30%;
border: 5px solid gold;
}
#clear-float {
clear: left; /* 还可以是 right both */
}
</style>
<body>
<div id="left-float">
左浮动
</div>
<div id="clear-float">
清除浮动后
</div>
</body>
image.png
浮动产生问题2：环绕图片超出外盒子
<style type="text/css">
#box {
height: 200px; /* 高度仅200*/
border: 5px solid;
}
img {
float: right;
}
</style>
<body>
<div id="box">
<p>
<img src="http://img0.pcgames.com.cn/pcgames/1608/10/6294575_z0809aa03s_thumb.jpg">
sad sadfh asdfhl asdhf asldfh asdlhf asdfhl sdafhsa dfhlsdaf asdhfasd flhasdf asdf saldfh dsf asldf sadf sadlhf sadflhsda flsd fasdhfsd afhasldf ds fasdhlf asdfhlasldf asldf sdafhlas dfasdfhasd fd asdfl sdafhlas dfasdl dsf asf das ldfhs dfa sdsd sa
</p>
</div>
</body>
Snip20180617_14.png
修复如下：
<style type="text/css">
#box {
height: 200px; /* 高度仅200*/
border: 5px solid;
overflow: auto; /* 超过高度时自动延伸 */
zoom: 1; /* 缩放比例 1 */
}
img {
float: right;
}
</style>
<body>
<div id="box">
<p>
<img src="http://img0.pcgames.com.cn/pcgames/1608/10/6294575_z0809aa03s_thumb.jpg">
sad sadfh asdfhl asdhf asldfh asdlhf asdfhl sdafhsa dfhlsdaf asdhfasd flhasdf asdf saldfh dsf asldf sadf sadlhf sadflhsda flsd fasdhfsd afhasldf ds fasdhlf asdfhlasldf asldf sdafhlas dfasdfhasd fd asdfl sdafhlas dfasdl dsf asf das ldfhs dfa sdsd sa
</p>
</div>
</body>
image.png
网友评论