浮动

简介: 浮动

1.标准文档流:

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

image.png

2.display属性

image.png

隐藏属性

/* 隐藏之后不会保留位置 */        displaynone;
        /* 隐藏之后会保留位置 */        visibilityhidden;

image.png

3.display特性

块级元素与行级元素的转变(block、inline)控制块元素排到一行(inline-block)控制元素的显示和隐藏(none)

4.浮动:float属性:left(做左浮动) right(右浮动)

image.png

5.清除浮动

image.png

6.解决父级边框塌陷的方法

image.png

7.溢出处理

image.png

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