CSS浮动布局详解
CSS中元素位置浮动的处理：
基础概念介绍：
案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素浮动</title>
<style type="text/css">
#d0,p {
width:450px;
border:1px solid #000;
}
#d0>div {
width:100px;
height:100px;
margin:10px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
}
#d3 {
background-color: blue;
}
/* 浮动 */
#d1,#d2,#d3 {
float:right;
}
</style>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
<p>浮动时看看我的位置</p>
</body>
</html>
细节分解：去除如下样式代码
/* 浮动 */
#d1,#d2,#d3 {
float:right;
}
依次追加 d1、d2、d3浮动样式：
/* 浮动 */
#d1{
float:right;
}/* 浮动 */
#d1,#d2 {
float:right;
}/* 浮动 */
#d1,#d2,#d3 {
float:right;
}对应的页面显示效果依次为：
A:
B:
C:
第三次的改动之所以文字会换行，是由于浏览器默认要完全显示文本原因：
按下F12按键弹出页面调试界面，可以很清楚的看到由于浏览器对文字的默认设置导致
在div块右浮动后留给P元素中文字的宽度不能在一行显示，所示折行显示，占用两个文字高度18*2px，即36px.
同时我们会发现P元素默认的margin为16px，这个应该是浏览器对P元素的默认设置。
如下图所示：
扫一扫
6157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
