CSS-浮动

一:浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。

• none: 表示不浮动，默认
• left: 表示左浮动
• right：表示右浮动

二: 浮动的特性

• 1.浮动的元素脱标
• 2.浮动的元素互相贴靠
• 3.浮动的元素由"子围"效果
• 4.收缩的效果
• 所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高
• 要浮动就要一起浮动。另外，有浮动，一定要清除浮动，

三: 清楚浮动

• 给父盒子设置高度
• clear:both
• 伪元素清除法(常用)
• overflow：hidden(常用)

3.1 给父盒子设置高度

这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

3.2 clear:both

clear：意思就是清除的意思。

有三个值：

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

 

3.3  伪元素清楚法(常用)

              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden