本文介绍了HTML中的块级元素与行内元素，以及如何通过display属性来设置元素的显示方式。重点讨论了float属性在布局中的应用，展示了如何使元素浮动并创建多列布局。同时，文章还详细解释了由于浮动可能导致的父级边框塌陷问题，提出了几种解决方法，包括clear属性、增加父级高度、添加空div以及使用overflow属性。通过对这些概念的理解，读者能够更好地掌握网页布局技巧。
（一）标准文档流
块级元素：独占一行
h1~h6 p div ul li ...行内元素：不独占一行
span a img strong ...行内元素 可以被包含在 块级元素 中，反之，不可以。
（二）display
display也是一种实现行内元素排列的方式，但我们很多情况都是用float。
/*block 块元素
inline 行内元素
inline-block 是块元素，但可以内联，在一行
none 相当于删除区域 */（三）float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="picture">
<div class="p1"><img src="images/1.jfif" alt=""></div>
<div class="p2"><img src="images/2.jfif" alt=""></div>
<div class="p3"><img src="images/3.jfif" alt=""></div>
<div class="p4">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止
</div>
</div>
</body>
</html>div{
margin: 10px;
padding: 5px;
}
#picture{
border: 2px dashed red;
}
.p1{
border: 2px dashed orange;
display: inline-block;
float: right;
}
.p2{
border: 2px dashed #ffbdf2;
display: inline-block;
float: right;
}
.p3{
border: 2px dashed springgreen;
display: inline-block;
float: right;
}
.p4{
border: 2px dashed plum;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
}（四）父级边框塌陷的问题
clear（清除浮动）
/*clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
*/问题解决方案
-
增加父级元素高度
简单，假设元素有了固定的高度，就会被限制
#picture{
border: 2px dashed red;
height: 400px;
}-
增加一个空的div，并清除浮动
简单，但代码中应该尽量避免空的div
<div class="clear"></div>.clear{
clear: both;
}-
在父级元素中增加一个 overflow 属性
简单，下拉的一些场景使用，但不美观
overflow: scroll; /*滚动条*/
overflow: hidden; /*将溢出部分隐藏*/-
在父类中添加一个伪类（推荐使用）
写法稍微复杂一点，但在不改变原有代码的基础上新增一些代码，没有副作用
#picture{
border: 2px dashed red;
}
#picture:after{
content:'';
display: block;
clear: both;
}（五）对比
-
display：方向不可以控制
-
float：浮动起来可能会脱离标准文档流，要解决父级边框塌陷的问题
扫一扫
902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
