阿坤 发表于 2023-6-22 14:00:02

css样式浮动的特点

浮动的特点:
1、设置浮动后,水平布局等式不需成立,并且元素从文档流脱离,不再占用文档流位置
2、设置浮动可以将元素向其父元素的左方向或者右方向浮动
3、浮动元素不会浮动出父元素
4、浮动元素移动时不会超过之前的浮动元素
5、浮动元素不会超过他上边的兄弟元素,最多是和他一样高
6、浮动元素不会盖住文字,文字自动环绕图片

脱离文档流特点:
1、块元素不在占满一行,宽度和高度默认被内容撑开
2、行内元素变成块,特点和块元素脱离文档流一样
3、不再区分块元素和行内元素
BFC(Block Formatting Context):
1、开启BFC后,元素变成一个独立的布局区域
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素和父元素外边距不会重叠
4、BFC内可有包含浮动元素

开启BFC的方法:
1、HTML元素本身
2、float的值不为none
3、position为absolute或者fixed
4、display的值为inline-block、table-cell、table-caption
5、overflow的值不为visible

二哈 发表于 2023-6-22 16:10:15

{:smile:}{:sad:}{:cry:}{:biggrin:}{:shocked:}{:tongue:}
页: [1]
查看完整版本: css样式浮动的特点