CSS---浮动造成的影响

1.浮动

①设置浮动的元素不占用空间;

②设置浮动的元素层级高于普通元素,也就是说会覆盖其他元素;

③在同一行中的元素要横向排列,将元素都添加浮动属性,float:left; 向左浮动,float:right;向右浮动;

④只有块级元素才能设置宽和高,行内元素没有宽和高,行内元素的宽和高是有内容决定的,无论之前是否是块级元素,设置浮动后一定是块级元素;

⑤盒子设置浮动属性后不属于正常的文档流;

2.清除浮动

如果父盒子没有设置固定高度,而子盒子设置了浮动,父盒子将会受到影响无法正常计算,如何让父盒子得到一个自然高度:

方法①:在父盒子里面的最下面添加一个空盒子,<div style="clear:both;"></div>;

方法②:解决浏览器的bug,在父盒子的样式中添加一条样式,overflow:hidden;

原文地址:https://www.cnblogs.com/wells33373/p/8176168.html