CSS样式之浮动
1.浮动
2.清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
* 文档流（标准流）
* 元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行
*/
body,ul,li{
margin: 0px;
padding: 0px;
}
li {
list-style: none;
/*设置li为浮动显示
*
* float: left | right
* 特点：
* ★元素浮动之后不占据原来的位置（脱标）
* ★浮动的盒子在一行上显示
* ★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
*
* 浮动的作用
* ◆文本绕图
* ◆制作导航
* ◆网页布局
*
* 当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
* ◆清除浮动不是不用浮动，清除浮动产生的不利影响。
* ◆清除浮动的方法 clear: left | right | both 工作里用的最多的是clear:both;
* ◆额外标签法:在最后一个浮动元素后添加标签。
* ◆给父集元素使用overflow:hidden; bfc 如果有内容出了盒子，不能使用这个方法。
* ◆伪元素清除浮动 推荐使用
*/
float: left;
}
a{
text-decoration: none;
display: inline-block;
font: 16px/30px "微软雅黑";
height: 30px;
width: 60px;
text-align: center;
}
div{
height: 30px;
width: 600px;
margin: 20px auto;
background: papayawhip;
}
a:hover{
background: gainsboro;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">百度</a></li>
<li><a href="">谷歌</a></li>
<li><a href="">腾讯</a></li>
</ul>
</div>
</body>
</html>
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
