学习浮动首先我们要先清楚一个概念——文档流。那么什么是文档流呢?
文档流是文档中可显示对象在排列时所占用的位置。简单来说就是从头到尾按照文档的顺序,该在什么位置就在什么位置,也可以按照上面的意思理解,自上而下,自左到右的顺序。
而今天学习的float就是使得元素脱离文档流从而达到我们想要的效果的方法之一。
一、浮动
首先先来一个正常的文档流:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.mydiv{
background: skyblue;
}
.div1{
width: 200px;
height: 200px;
background: red;
}
.div2{
width: 200px;
height: 200px;
background: yellow;
}
.div3{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="mydiv">