本文介绍了CSS中display属性的使用，包括块级元素与行内元素的区别，以及如何通过display切换元素类型。同时，详细探讨了float属性在布局中的作用，如图片并列显示和文字浮动效果。还提到了父级边框塌陷问题及其解决方案，如使用clear、增加父级高度、overflow隐藏及伪类after。最后总结了display和float在布局控制上的异同。
display
块级元素：独占一行
如：h1~h6,p,div,列表。。
行内元素：不独占一行
如：span，a，img，strong。。。
行内元素可以被包含在块级元素中，反之，则不可以
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div>div块元素</div>
<span>span 1 行内元素</span>
<span>span 2 行内元素</span>
</body>
在该代码中因为div是块元素，所以它独占一整行，且设置的宽高能表现出来，而span因为是行内元素，它无法设置宽和高，文字有多少，它就多大，且不独占一行，两个span会并列在一行
display：
block 是块元素
inline 是行内元素
inline-block 是块元素，但是也可以在一行（内联）
none 将这部分消失
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
运用display之后就可以进行行内元素和块元素的转换
例子：用列表，将li标签转换为inline-block，即可完成导航栏。li标签默认是垂直向下，改后变为内联，可在同一行。
float浮动
例子：
1.几张图片如下布局：
2.在其基础上添加代码display：inline-block，改成既是块元素又是行内元素。
3.然后将图片添加浮动。float：left；就能发现这三张图片脱离于原来的黑色边框独立出来了，都靠左对齐。
4.这是将文字也添加浮动，全部都改为靠右浮动的结果float：right；
以上大部分截图来源于狂神说java
父级边框塌陷的问题
clear：
clear：right； 右侧不允许有浮动元素，有就排到下面一行去
clear：left； 左侧不允许有浮动元素
clear：both；两侧不允许有浮动
clear：none； 可以有浮动
（父级边框塌陷的问题就像上面一样，虽然图片和文字写在父级标签里，但是用float之后都脱离了父级边框）
解决方案：
- 增加父级元素的高度
- 增加一个空的div标签，清除浮动（因为这个div会在其他浮动的块下面，而父级框架会将这个空的标签包含在内，以至于将浮动的标签也就包含在内了）
基本的html和css代码如下：
<div class="clear"><div>
.clear{
clear:both;
margin:0;
padding:0;
}
- overflow
在父级元素中增加一个 overflow：hidden；
- 父类添加一个伪类：after
这是事先给浮动元素的父级边框起名id=“father”
# father:after{
content:'';
display:block;
clear:both;
}
小结：
- 浮动后面加空div，但代码中应该尽量避免空div
- 设置父元素的高度，元素假设有了固定的高度就会被限制
- overflow 下拉的一些场景避免使用
- 父类添加一个伪类：after（推荐）。该方法无副作用。
对比
他们都可以调整元素是否在一行。但不同：
- display
方向不可控 - float
方向可控，但是浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
