简单理解css浮动属性

css浮动属性

css浮动属性通俗的来说就是让一个个原本坚守自己位置的元素让它们在网页中能紧挨在一起，举个例子来说吧，就比如有两个div盒子在网页中显示，一个盒子里展示的是图片，另一个盒子中展示的是文字，他们虽说自己占有的位置不大，可是他们却各占一行来显示，这可不是一山容不得二虎，而是因为两个盒子都坚守在自己的位置，别人的地方就算是空的，也不能去占用。

而用css的方法给两个盒子添加了浮动属性之后，就会有一些神奇的变化，两个盒子之间将没有空隙，都会紧挨在浮动属性值的一边显示。

三个盒子原显示位置 在都添加左浮动属性之后的位置变成了

css浮动属性它最常用的属性值，分别是float:left;左浮动和float:right右浮动;
浮动属性在网页布局中可是必不可少的一个属性，有了它可以让元素一个挨着一个。创建一个自然流布局，同时可以设置自身尺寸和父元素容器的尺寸大小。一个元素浮动时，其他元素会“环绕”他。

单独给盒子添加左浮动之后文字的位置发生的改变，文字全部环绕在了盒子周围。

当然凡事都是会有利弊，浮动属性的弊端在哪里呢？有时容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外边而影响甚至破坏布局的现象，这就是浮动的一个弊端叫做浮动溢出。想要解决这个问题就要用css清除浮动：claer:both;来保证接下来的页面正常显示。
这就是我刚刚接触的浮动属性，对他简单的认识。