CSS浮动(float属性控制css浮动)
因为div都是独自占一行,如果想要几个div占一行就要使用浮动。
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
第二句话 解释:普通框(在普通流中),浮动框在浮动时,会重合普通框,就表现浮动框（红色是浮动框）好像不存在。下图可以解释（红色是向左浮动框）
框向右浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one{
border: 3px solid red;
width:300px;
height:150px;
/*第一个框向左浮动*/
float: right;
}
#two{
border: 3px solid yellow;
width:300px;
height:150px;
}
#three{
border: 3px solid green;
width:300px;
height:150px;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
页面展示
红色框向右浮动
一个页面的宽度最长是1350px如果第三个浮动框（每个浮动框是500px）,放不下会自动浮动到下一行如果第一个浮动框高度比第二个浮动框高度要大,就会出现下图的情况。
清除浮动
如果想要浮动框,和普通框不重合,那么需要清除浮动。
清除浮动的方法：就是在浮动框下面创建一个div,并标记id使用css选择器加上属性clear
属性值是both(在左右两侧不允许浮动框元素),left(在左侧不允许出现浮动元素)、righ(在右侧不允许出现浮动元素)、none(默认值允许浮动元素出现在两侧)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one{
border: 3px solid red;
width:300px;
height:150px;
/*第一个框向左浮动*/
/*float: right;*/
float: left;
}
/*清除浮动*/
#clear{
clear: both;
}
#two{
border: 3px solid yellow;
width:300px;
height:150px;
/*float: left;*/
}
#three{
border: 3px solid green;
width:300px;
height:150px;
/*float: left;*/
}
</style>
</head>
<body>
<div id="one"></div>
<div id="clear"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
页面展示
1号框是浮动框,2,3不是普通框想要普通框与浮动框不重合,需要清除浮动。
盒子模型
1.盒子的组成
单个盒子
白话解说：
上图中，红色边框为手机的外包装盒，而且外包装盒有一定的厚度(border)，为了保 护手机在运送的过程中不被磕坏，我们在盒子里面四周填充了一层泡沫，并且泡沫也有一定的厚度(padding)，这层泡沫将手机包裹住，手机就是整个盒子的核心内容(content)。
可以这么对比记忆：
手机------>>>内容(content)
泡沫------>>>padding
包装盒---->>>boder
外包装间距-->>>margin
多个盒子：
我们在修改页面元素位置的时候，需要设定它相对于盒子的位置，那么我们有必要清楚关于盒子模型里面的取值相关问题。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和
外边距的值均为 0.
占据页面大小的区域是整个元素框的总尺寸！默认情况，padding、margin、border
均为 0，假如我们设定了区域内容的 width 和 height，那么此时整个元素框的总尺寸就是
该区域内容的宽高了，此时，如果设定了 margin 值，那么整个元素框的总尺寸会发生变化
(变大了)，但是我们希望它的整体布局不发生变化！所有我们可以修改区域内容的尺寸(原 有大小减去设定的 margin 值)。
