浮动

简介: 浮动

一、标准文档流:

1.指元素根据块级元素或行内元素的特性按从上到下,从左到右的方式自然排列,默认的排序方式。

二、块级元素:

div,p,列表:宽度默认为浏览器的宽度,可以单独设置宽和高

三、行内元素:

span,a,img:宽度默认为内容的宽度,不可以单独设置宽和高

重点:1.行内元素转换为块级元素:display:block;

2.块级元素转换为行内元素:display:inline;

3.将两个元素从左到右排列:display:inline-block;

四、display的特性:

1.可以将行内元素转换为块级元素,反之也可以。

2.既可以显示行内元素的特性,也可以显示块级元素的特性。

3.设置元素的隐藏

五、浮动:

1.left:元素左浮动

2.right:元素右浮动

3.none:元素不浮动,默认值。

六、解决父元素塌陷问题:

1.设置父元素的高(不推荐使用)

2.在父元素中新加一个空的div,设置该div清除浮动。

3.设置父元素的overflow属性。

visible:默认值,内容不会被修剪,会呈现在盒子外

hidden:内容会被修剪,并且其余内容是不可见的

scorll:内容会被修剪,但是有滚动条

auto:如果内容内容被修剪,则浏览器会显示滚动条以便查看其余的内容

相关文章
|
1月前
|
编解码 前端开发
浮动布局
【10月更文挑战第27天】浮动布局在实现多列布局和图文混排等方面具有一定的优势,但也存在高度塌陷和定位控制等缺点。通过合理地选择清除浮动的方式,可以有效地解决浮动布局带来的问题,确保页面布局的稳定和正确显示。
|
1月前
|
前端开发
除了伪元素清除法,还有哪些方法可以解决浮动布局的高度塌陷问题
【10月更文挑战第27天】不同的方法适用于不同的场景和布局需求,在实际开发中,需要根据具体情况选择最合适的方法来解决浮动布局的高度塌陷问题。
|
1月前
|
前端开发
|
4月前
|
前端开发 容器
cssfloat浮动
cssfloat浮动
42 1
如何让一个盒子居中,解决盒子塌陷的方法
如何让一个盒子居中,解决盒子塌陷的方法
|
前端开发
CSS实现鼠标悬停图片向上浮动,放大,翻转
CSS实现鼠标悬停图片向上浮动,放大,翻转
322 0
|
前端开发
下一篇
DataWorks