CSS选择器、盒子模型与浮动（二）

---

前言

在上一篇博客中我说过了四个知识点中的前面两个，一个是CSS的选择器，另一个是CSS的元素显示模式，那么今天我们就来说一说剩下的两个知识点，另外两个知识点就是盒子模型以及浮动

---

一、盒子模型

首先我们来说说盒子模型，我们的CSS选择器分为了基础选择器和复合选择器，元素显示模型也分为块元素，行内元素以及行内块元素。那我们的盒子模型又是有哪些元素或者标签组成的呢？

1.盒子模型的组成

简单说明一下：盒子模型有四部分组成是margin外边距、padding内边距、border边框以及content内容，content内容就是你在这个盒子里面放入的所有元素，比如文字、视频等等……详细情况请看下图：

2.圆角边框

圆角边框border-radius在盒子模型中也是非常重要的，在制作网页的很多时候都会用到圆角属性，比如会设计一些圆角的按钮之类的方面会用的很多。圆角属性我也为大家整理出来了。看下图：

圆角边框radius半径原理：圆与边框的交集形成的圆角效果。
圆角边框的写法有四种：
1.border-top-left-radius：左上角
2.border-top-right-radius：右上角
3.border-bottom-left-radius：左下角
4.border-bottom-right-radius：左下角

二、浮动和清除浮动

在我看来浮动无外乎就是那几个属性，但是如果你小看了他那你就会吃不少“亏”，因为在网页里面他太常用了，基本上每一个模块上都会有他的身影，可以说他是你制作网页过程中不可缺少的一个重要“人物”。

1.什么是浮动

既然我们要说浮动我们肯定就要先知道什么是浮动，浮动的属性是什么？那么什么是浮动？浮动就是float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或者另一个浮动框的边缘。这就是浮动。那我们为什么要设置浮动呢？其实在制作网页的过程中我们有很多的布局效果，标准流没办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。所以我们需要浮动就是为了翻遍我们更好的布局。

2.浮动特性

浮动中还有非常重要的一个知识点叫做浮动特性，浮动特性的知识点我为你们整理好了，我们一起看看吧！

3.清除浮动

前面说了我们在做网页的时候浮动我们很多时候都会使用但是这里为什么又要清除浮动呢？马上我为你们解释解释为什么，其实这个与浮动的浮动特性有关，因为当我们设置浮动之后，浮动元素会脱离文本流，而脱离文本流之后呢？由于浮动元素不在占用原文档流的位置，所以他会对后面的元素排版产生影响。这个时候我们就需要清除浮动。那清除浮动有哪些方法呢？

3.1清除浮动clear属性

3.2清除浮动的方法

1.额外标签法：所谓的额外标签法就是在浮动元素末尾添加一个孔的标签码。
2.给父级添加overflow属性
3.给父级添加after属性

.clearfix：after{
	cintent:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}
.clearfix{
	*zoom:1;
}

4.给父级添加双伪元素

.clearfix:before,
.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;
}

---

总结

以上就是今天要讲的内容，这些CSS的内容就是我想为大家讲解了我认为比较重要的点。希望大家也能从我的博客里学到有用的内容。谢谢！