这是我参与「4月日新计划更文活动」的第5天。
今天我学习了html的3种布局方式。他们分别是浮动布局、定位布局，以及弹性布局。
话不多说，让我们来看看这几种布局方式分别是如何实现的吧。
由于时间关系，这一篇文章主要讲一下浮动布局的操作。
那首先我们来看一下浮动布局。
我们知道浮动float一般有left、right这样的属性，分别代表左浮动和右浮动。
那浮动的元素是脱离文档流的，所以需要清除浮动来让浮动的元素重新回到文档流中。后续我会专门写一篇文章分享如何清除浮动。
好，我写一个例子来展示浮动是如何实现的吧。
以下为页面的展示。
代码内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" contect="web前端 | 技术文章" />
<meta name="description" contect="写web前端技术文章的地方" />
<meta name="author" contect="写前端的小北" />
<title>浮动布局</title>
</head>
<style>
.container{
overflow: hidden;
width: 100%;
border: 1px solid #000;
}
.left{
float: left;
width: 50%;
height: 300px;
background-color: red;
}
.right{
float: right;
width: 50%;
height: 300px;
background-color: green;
}
</style>
<body>
<h3>写一个浮动的例子</h3>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
以上，就通过float属性完成了一个浮动布局的例子，这里我是通过一个overflow属性完成了清除浮动的操作。
那我们都知道要清除浮动，如果不清除浮动会产生什么结果呢？
一个常见的问题就是：
脱离了文档流的子元素会让父元素的高度不是由子元素撑起来的，在没有文档流的子元素中，父元素的高度是0。
让我稍微修改一下上面的代码，如果我不清除浮动，看下父元素的高度是多少。
页面效果如下：
此时黑色框的父元素完全包裹住了子元素。
修改的代码如下：
.container{
/* overflow: hidden; */
width: 100%;
border: 2px solid #000;
}
我把css中的overflow属性给注释掉了。
然后我们可以看到这个黑色框的高度是0，即没有包裹住没有清除浮动的子元素。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
