CSS浮动写法

这一章主要记录定位与浮动常用的。

1.浮动

说到浮动我们要先说说标准流和浮动流。

1.标准流

标准流很常见，浏览器默认的方式就是标准流。
标准流怎么理解呢？
实现我们得知道CSS中的三种元素分类。

行内元素，块级元素，行内块级元素

行内元素	块级元素	行内块级元素
不独占一行	独占一行	不独占一行
默认和内容一样宽	默认和父元素一样宽	默认和内容
不可以设置宽高	可以设置宽高	可以设置宽高

大概三种元素的去区别就出来了。
在这里插入另外一个知识点：
在HTML中通常把元素（标签）分为两类：

容器级标签	文本级标签
p h ul ol li dt等	span/p/em/ins等
可以嵌套其他的所有标签	只可以嵌套文字/图片/超链接

现在可以讲讲标准流了：

在标准流中有两种排版方式，块级元素按照垂直排版，行内元素和行内块级按照水平排版，顺着来

2.浮动流

浮动的属性：

clear	清除	float	浮动
left/right	左/右不允许浮动	left/right	左浮动/右浮动
both/none	均不可/不清除	none	不浮动

浮动有几点要注意：

浮动是指设置浮动之后的元素会怎么浮动在他周围！！！

例如right表示后面的元素会排在他左边！！！

浮动流不区分是什么元素，只可以水平排版，没有居中（center）,不可以使用margin: 0 auto；均可以设置宽高。

特点

前一个浮动后面一个没有，那么前面一个会盖住后面一个（文字不会盖住，会环绕在周围），这里可以试着去想想都浮动的排列景象。

先浮动的会在前面，后浮动的会在后面

浮动之后的位置由浮动之前在标准流中的位置来确定，这里主要是理解为浮动后什么元素会受影响

左浮动会去找左浮动，右浮动会跟在右浮动后面

当父元素宽度可以显示所有浮动时，并排显示

浮动的贴靠主要是指当父元素宽度不够时会往前靠，怎么理解呢，就是假如你一个窗口放了很多图片把窗口宽度缩小时图片会自动往下排的现象

以上是CSS浮动写法的详细内容。更多信息请关注PHP中文网其他相关文章！