1.css中的浮动:
在css中为了让元素移动到父元素的左边或者右边,我们可以对元素设置浮动float.
2.float:left/right
浮动的选择有两种,一种是float:left左浮动。还有一种是float:right右浮动
3.如果对一个元素设置了浮动,那么这个元素就会脱离标准文档流,并且该元素后面的元素会占据该元素原本的位置,并且元素后面的内容会被挤出。
4.加了浮动的元素是没有宽和高的,并且该元素的父元素的高度也会显示即高度塌陷,加了浮动的元素的宽和高是根据元素内部的内容动态需变化的。要对其父元素重新设置高度。
5.如果对某些元素设置了左浮动,那么这些元素会在同一排显示,但是如果这些元素的宽度和大于父元素,超出的部分(包括该元素)就会在下一行显示。
6.浮动的应用:
在网页布局的时候,一般一个网页的主体会分为几列,这时候我们可以使用浮动来实现。
内容包裹图片显示的时候,我们对图片设置浮动就可以,剩下的元素会占据图片原本的位置,但是内部的文本内容会在四周显示,即文本内容会被挤出。
在设置网站的横向导航的时候,,可以对列表元素设置浮动。
7.在实际应用的时候,我们需要对某些受到浮动影响的元素设置清除浮动,即不需要占据浮动元素原本的位置,我们可以通过设置clear:both/left/right.
8.clear:both 清除所有的浮动影响,不管是左浮动还是右浮动
clear:left 清除左浮动的影响
clear:right 清除右浮动的影响