理解 float:right/left对display的影响之前得建议先了解以下内容：
-
了解哪些是行内元素和块级元素：
推荐：行内元素和块级元素有哪些 -
理解display:inline,block,inline-block：
推荐：display:inline,block,inline-block -
块级元素、内联元素以及浮动
推荐：块级元素与内联元素（行内元素）及浮动知识总结
float:left/right对display的影响的实例：（如何让两个p元素在同一行左右浮动显示）
最终效果图：
1、原代码：（以下修改都是基于原代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float：left/right对display的影响及实例</title>
<style>
.pp {
width: 200px;
height: 70px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="pp">
<p>我</p>
<p class="right">你</p>
</div>
</body>
</html>
结果分析：此时，两个p元素都是块级元素，所以它们独自占领一行
2、让两个p元素在同一行：
添加样式：
p {
display:inline;
}
结果分析：：两个p元素都成了行内元素，占领了同一行
3、让两个p元素在同一行且左右浮动显示：
错误做法：在上面的结果基础之上让第二个p元素右浮动
- 添加样式:
p {
display:inline;
}
.right {
float: right;
}
结果分析：虽然将p元素都设置为了display:inline(行内元素)，但是第二个p元素添加float:right,就成为了display:inilne-block（行内块元素），不管它之前是什么元素，它都有自己的高度，独占一行。
4、解决方法：
- display:inline-block
修改样式：
p {
display:inline-block;
}
.right {
float: right;
}
结果分析：p元素都设置为行内块元素，即是同一行的块元素，浮动后结果自然正确
- 单纯利用float使它们左右浮动
修改样式：
p {
float: left;
}
.right {
float: right;
}
结果分析：只要一浮动，都成为了行内块元素
这是自我总结的，若是有不全或是不对之处，还请多多指教呀~~
扫一扫
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
