前言
浮动作为CSS中常用的布局方式,本文将详细介绍浮动内容
定义
【float浮动】
浮动元素会脱离普通流,然后按照指定的方向,向左或向右移动,直到碰到父级边界或另外一个浮动元素
【值】left | right | none | inherit
【继承性】无
【特性】
【1】浮动流
正常流中的元素一个接一个排列,浮动元素也构成浮动流
【2】块级框
浮动元素自身会生成一个块级框,不论这个元素本身是什么,使浮动元素的周围的外边距不会合并
【3】包裹性
浮动元素的包含块是指其最近的块级祖先元素,后代的浮动元素不应该超过包含块的上下右边界。
若不设置包含块的高度,包含块若浮动,则包含块会延伸,进而包含所有的后代浮动元素;
若不设置包含块的宽度,包含块若浮动,则包含块的宽度由后代浮动元素撑开
【4】破坏性
浮动元素脱离正常流,并且破坏了自身的行框属性,使其包含块元素的高度塌陷,使浮动框旁边的行框被缩短,从而为浮动框留出空间,行框围绕浮动框重新排列
【表现】
【1】浮动元素的左(右)外边界必须是源文档中的之前出现的左浮动(有浮动)元素的右(左)外边界。除非后出现浮动元素的顶端在先出现浮动元素的底端下
【2】左浮动元素的右外边界不会再其右边右浮动元素的左边界的右边。
【3】左(右)浮动元素左边(右边)有一个浮动元素,前者的右外边界不能再其包含块右(左)边界的右边(左边)
【4】浮动元素的左(右)外边界不能超出其包含块元素的左(右)外边界
【5】一个浮动元素的顶端不能比其父元素的内顶端高。若果一个浮动元素在两个合并外边距之间,防止这个浮动元素时相当于在两个元素之间有一个块级父元素
【6】浮动元素的顶端不能比之前所有浮动元素怒或块级元素的顶端更高
【7】浮动元素必须尽可能高的放置
【8】左浮动元素必须向左尽可能远。位置越高,就会浮动的越远
【重叠】
浮动元素超出父元素边界的方法有两种:
1.浮动元素的宽度大于父元素的宽度
2.设置负外边距。如果浮动元素存在负外边距,则浮动元素和正常流元素重叠
【1】行内框和一个浮动元素重叠时,其边框、背景、内容都在该浮动元素之上显示
【2】块级框和一个浮动元素重叠时,其边框和背景在浮动元素之下显示,内容在浮动元素之上显示。