1,纯粹通过HTML书写的页面内容，他的排列方式，我们称为：传统文档流输出。：表现的特征：靠左对齐，上下排列。
我们如果想实现这个页面设计上的排列方式，我们就需要改变这种输出状态。俗称：脱标：脱离标准文档流。
脱标方法：浮动：属性名称：float：属性的值：left：向左，right：向右，none:不浮动。
浮动的原理：就是将父级下的子元素，漂浮起来，脱离父级的束缚，同时向左或者向右，这样上下的排列方式就会称为一行输出。
浮动之后：所有标签的特性改变：统统改变为块元素。元素的默认宽度以内容的宽度为准。
浮动的负面效果：1，没有设置固定高度的父元素会失去高度，背景色或者背景图会不见了。
2，上面一行浮动之后，下面一行的内容会发生跟随现象。
清除浮动的方法：属性名：clear：属性的值：left，right，both
直接使用clear：both可以解决第二行元素跟随的现象。：解决的方法：谁跟随，就在跟随的那个元素的父级上设置：clear:both.
如何解决父级高度的消失：
1，直接给父级设置固定的高度。优点：简单明了，方便快捷。缺点是：灵活性差。
2，在失去了高度的父级元素的内容的后面，插入一个不参与浮动的空的块元素。给这个块元素添加：clear:both;,父级高度就恢复到子级高度的位置。
优点：灵活性高，实现方便。缺点：需要重复写，增加了代码量。
3，给失去了高度的父级元素添加样式：overflow:hidden;
overflow：超出/溢出部分。溢出部分的标准是：超出元素四条边之外的内容，那么检测是否溢出的基本条件：这个元素需要有四条边
hidden：隐藏
当我们给失去高度的父级设置了overflow：hidden；这个时候该父级就必须先有四条边，然后去判断是否溢出，这个时候父级就必须恢复高度，高度恢复到子级的底边线。
这种方法的最大缺陷就是如果父级下有二级菜单，如果使用了overflow：hidden，二级菜单就会被隐藏。
4，在失去高度的父级的内容的后面插入一个空的块元素，做clear:both
失去高度的父元素:after{content:"";display:block;visibility:hidden;clear:both}
失去高度的父元素:after//--》就是在失去高度的父级的内容后面
{content:"";}--》插入的内容为空。content是内容的意思
display:block;显示成为块。
visibility:hidden;内容隐藏，但是依然占位。
