CSS-13-浮动

1.float浮动流

1.写法:

	float:left; 左浮动
	float:right; 右浮动

2.浮动的初衷
浮动一开始不是拿来做布局,而是为了解决文字环绕图片的问题(了解,面试题可能有)
强行要求浮动作为一种布局手段

3.特点
浮动元素,可以实现模式转换,拥有行内块的特点
浮动元素,脱离标准流/脱标,不占据标准流的位置,导致后面的标准流会被浮动的遮住 浮动流的层级比标准流高

4.浮动的顺序
浮动元素的顺序与css代码没有关系
由html的结构代码顺序决定
浏览器渲染代码的顺序,是先渲染html,再渲染css样式

5.父子元素浮动
当父盒子浮动了,那么子盒子会跟着父盒子
子盒子浮动的范围,只能在父盒子内

6.浮动导航栏正确结构
正确的导航栏结构
ul > li > a
a的文本颜色不能继承,只能直接作用
给li添加一个浮动

2.浮动的影响是什么?

1.影响

当所有的子元素都浮动了,那么父元素有可能会失去高度.

原因:

因为父盒子是标准流,但是子元素是浮动流,浮动的元素不占据标准流的位置,所以父元素失去高度
.

2.清除浮动

1.利用高度法清除浮动影响

父盒子没有高度,就给父盒子设置一个高度.
高度法适合固定高度的盒子
但是如果高度是动态(子元素多就高,子元素少就矮),那么高度法就不适合.

2.利用overflow来清除浮动的影响

给父盒子设置overflow:hidden;
固定的可以用,动态的也可以用

建议不要用,本职工作不是清除浮动影响,而是为了处理超出的元素

3.额外标签法清除浮动影响
官方推荐:额外标签法
在子元素的最后面添加一个额外标签,并且设置clear:both属性
因为会添加很多没有意义的结构代码,所以不用
例子:

	 .clear {
		clear: both;
	}

<div class="clear"></div>在子元素下的额外标签

4.单伪元素清除浮动影响
伪元素:在不改变结构代码的前提下,添加额外的元素----优势
在用到的标签添加一个.clearfix类就好了.

	.clearfix::after {
		content: ".";
		/* 为了兼容某一个低级版本的火狐浏览器 */
		clear: both;
		display: block;
		height: 0;
		visibility: hidden;
		/* 元素的可见性: 隐藏 */
	}
	/* 针对低级ie浏览器做兼容 */
	.clearfix {
		*zoom: 1;
	}

5.双伪元素清除浮动影响

	.clearfix::after,
	.clearfix::before{
		content: "";
		display: block;
	}
	.clearfix::after {
		clear: both;
	}
	/* 针对低级ie浏览器做兼容 */
	.clearfix {
		*zoom: 1;
	}

7.伪元素拓展
.clearfix::before 表示在.clearfix的子标签之前.
.clearfix::after 表示在.clearfix的子标签之后.
content: “”; 这个属性必须有.