关于浮动的一些注意事项

Posted 2021-01-17 liuxu24

关于浮动：

　　宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。　　

行内元素和块级元素的区别：（非常重要）

行内元素：

• 与其他行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

• 霸占一行，不能与其他任何元素并列；
• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。 

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: inline;

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

• 此时这个span能够设置宽度、高度
• 此时这个span必须霸占一行了，别人无法和他并排
• 如果不设置宽度，将撑满父亲

元素怎样浮动：

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

实例：img { float:right; }

给新手的建议：

我们在初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

 

清除浮动的几种方法：

1.在最后一个子元素增加空div设置clear：both 

2.增加伪类元素：after　{

clear:both;　　content:"";　　display:block;

}

实例：.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

3.给父级元素设置合理高度。

4.给父元素加overflow：hidden（不建议使用，会隐藏溢出的部分）。

补充：

上图中，一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。