浮动

简介: 浮动

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

相关文章
如何让一个盒子居中,解决盒子塌陷的方法
如何让一个盒子居中,解决盒子塌陷的方法
|
2月前
浮动和定位
浮动和定位
|
12月前
盒子模型、浮动、定位
盒子模型、浮动、定位
|
前端开发
|
前端开发 开发者
浮动与清除浮动| 学习笔记
快速学习浮动与清除浮动。
131 0
浮动与清除浮动| 学习笔记
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
网页是一个多层的结构,设置样式样式,也是一层一层的设置,最终我们看到的最上面的一层。
101 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距,盒子的大小由内容区、内边距和边框共同决定。外边距指的是当前盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置。
163 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(4)
通过本章认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法
125 0