这是我参与「第四届青训营 」笔记创作活动的第七天
1. HTML元素的分类
块元素：可以设置宽度和高度，独立成行。h1-6、p、div、ul、li
行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span
行内块元素：可以设置宽度和高度，不独立成行img、input、button
1.1 display属性
block：转换为块元素（常用）
inline：转换为行内元素
inline-block：转换为行内块元素
none：隐藏元素
1.2 float属性
用于设置浮动元素，便于让元素在同一行显示。这里元素可以是块级元素。
left：浮动元素处于页面靠左
right：浮动元素处于页面靠右
将块级元素设置为浮动元素后，就可以在同一行显示了
浮动元素的特性：脱离文档流
什么叫脱离文档流呢？
我的理解是：文档流之外的浮动元素之间会有碰撞体积，其与文档流之内的元素不会有，即两个重叠图层
内容和边栏盒子是浮动元素，而黄色的部分是文档流内的块级元素
1.3 清除浮动
一般来说，我们只想要浮动元素让块级元素同一行的作用，而不想失去浮动元素的碰撞体积。因此，浮动元素的浮动特性是弊端。
清除浮动就是用来消除这个弊端，让浮动元素重新具有碰撞体积。
clead:both
它一般用于一个块级元素中，用于清除该块级元素上方浮动元素的浮动
普遍习惯是利用伪元素选择器+类选择器建立一个清除浮动专用选择器，给需要清除浮动的元素设置一个 clear 类名，然后在其前后增加一个元素，并且设置三个样式（缺一不可）：
1.空内容content:"";
2.块级元素display:block;
3.清除浮动clead:both;
这样的clear样式选择器具有很好的复用性，当我们需要给那个元素取消浮动时，只需要在元素的盒子的div标签上的class属性添加一个名称clear。
示例：
<head>
<style>
.content{
width: 300px;
height: 200px;
border: 1px solid red;
float:left;
}
.aside{
width: 300px;
height: 200px;
border: 1px solid blue;
float: left;
}
.belowbox{
width: 400px;
height: 500px;
background-color: yellow;
}
.clear::before,.clear::after{
content:"";
display: block;
clear:both;
}
</style>
</head>
<body>
<div class="topbox clear">
<div class="content">
内容
</div>
<div class="aside">
边栏
</div>
</div>
<div class="belowbox"></div>
</body>
\
