float浮动基础

浮动 float

由来:

为实现文本环绕效果而产生,后用于快级元素横向并排布局
(优于display:inline-block;)

格式:

1. 标注文档流排布:依次从上至下默认排布.
2. 给盒元素设置float–脱标:脱离标准文档流.
3. 浮动元素不存在解析空格默认顶端对齐.

代码:

float:left;(从左往右排布)
float:right(从右往左排布)
浮动元素无法通过float居中.

特性:

1. 浮动元素会托起盒内内容.
2. 浮动的元素父级不设置宽度,内元素会往下掉.

浮动样式的重点:

1. 浮动的元素不会覆盖彼此
2. 具有和文本环绕相同的特性,一个浮动元素后面的行内元素首先按照文本环绕效果进行排列.

行内元素浮动样式的设置:

1. 图片脱离标准文档流
2. 默认顶端对齐
3. 以文本环绕效果进行,且脱标后文字自动补缺.

浮动元素高度塌陷问题:

概念:

当父元素高度由子元素撑开时,子元素浮动父元素会塌陷.

清除浮动带来的高度塌陷方法:

first:

给父元素一个固定高度:
缺点:固定而死板.
(缩放浏览器元素下落后会出现背景缺失)

second

给父级设置overflow:hidden.(溢出隐藏)
----触发BFC>领父元素具有一定的包裹性

利用一个幽灵元素清除浮动带来的效果

	
001
	
001
	
001
	

首先使father元素具有包裹性(overflow:hidden.)然后如上
缺陷:幽灵元素的方式有时会破坏结构(如上ul ol…)使搭建不合理.虽然现实无误,但有局限.

优势:可随意更改清除位置,此有零元素位置以上会清除.

third

伪元素法:

	
001
	
001
	
001

在父元素创造一个浏览器感知的同类元素,清除浮动带来的父元素高度塌陷问题.

clear:

clear:left;左浮动影响.
clear:right;右浮动影响.
clear:both;所有浮动影响.