本文介绍了CSS中的浮动和清除概念，浮动用于让元素左右浮动，常用于实现多元素并列排版，而清除浮动则能确保包围元素包裹浮动元素并恢复后续元素的正常布局。示例代码展示了如何在实践中应用这些概念，通过设置浮动和清除，创建了一个包含多个并列元素的布局。
CSS浮动和清除
- float：让元素浮动，取值：left(左浮动)、right(右浮动)
- clear：清除浮动，取值：left(清除左浮动)、right(清除右浮动)、both(同时清除上面的左浮动和右浮动)
1、CSS浮动
- 浮动的元素，将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止。
- 浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素。
- 浮动的元素，一定是“块元素”。不管它原来是什么元素。
- 如果浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄。因此，浮动元素一般要定宽和高。
- 一行的多个元素，要浮动一起浮动。
浮动的功能：可以实现将多个块元素并列排版。
如何让包围元素，包住浮动元素？
你就需要在浮动元素的下边，使用清除浮动操作。
2、CSS清除浮动
- CSS清除浮动的功能有两个：(1)可以包围元素从“视觉上”包住浮动元素(2)清除之下的其它元素将恢复默认排版。
- 有浮动，就得有清除。
- 如果包围元素指定了高度了，那么可以不使用清除功能。
实例
<style type="text/css">
/*全局CSS样式*/
body,ul,li,a,img{margin:0;padding:0;}
ul,li{list-style:none;}
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
body{font-size:12px;font-family:宋体;background-color:#ccc;}
/*开学模块*/
.kaixue{
width:330px;
margin:20px auto;
background-color:#fff;
padding:10px 10px;
}
.kaixue img{
width:142px;
height:88px;
border:none;
padding:10px 10px;
}
.kaixue li{
float:left; /*浮动*/
text-align:center;
}
.clear{clear:both;}
</style>
</head>
<body>
<div class="kaixue">
<ul>
<li>
<a href="#"><img src="images/img01.jpg" /></a><br />
<a href="#">曹伟-玩酷我的程序人生</a>
</li>
<li>
<a href="#"><img src="images/img02.jpg" /></a><br />
<a href="#">王东方-辣妈挑战PHP</a>
</li>
<li>
<a href="#"><img src="images/img03.jpg" /></a><br />
<a href="#">康红红专题-因为爱情</a>
</li>
<li>
<a href="#"><img src="images/img04.jpg" /></a><br />
<a href="#">陈建利专题-我有我原则</a>
</li>
</ul>
<div class="clear"></div>
</div>
扫一扫
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
