css浮动

css浮动:

浮动的属性值有三个
属性:float
属性值: none(默认值,不浮动)
left (左浮动)
right(右浮动)

浮动的定义
是一个具有浮动属性的元素脱离普通流的控制,移动到所属父元素的位置。失去元素独占一行的特性。多个子元素同时具有同一方向浮动属性的时候会出现子元素重叠现象。css浮动css浮动
给父元素中的子元素添加浮动属性时,可以使父元素中的子元素改变默认的左上纵向排列方式,变成左上横向,或者右上横向排列方式。
css浮动
css浮动

添加浮动属性的子元素,可以用margin元素在父元素中移动,如果移动数值大于父元素的宽或者高,则子元素会超出父元素。同级拥有浮动属性的元素会被挤下去。css浮动

清除浮动法:

清除浮动法作用于什么?为什么要清除浮动?
由于元素浮动不占用文档流空间,会带来一些问题,比如当父元素没有设高度属性的时候,子元素使用了浮动,这时会使父元素造成高度塌陷,会使后面的元素产生排版影响,所以我们用清除浮动法来解决这些问题。
css浮动

清除浮动法的几种方式

1:添加额外的标签:是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签。
2:父级添加 overflow 属性方法:可以给父级添加: overflow为 hidden|auto|scroll 都可以实现。可以先定义一个类名,然后把定义好的类名赋给浮动元素的父级元素。
3:使用after伪元素清除浮动。
css浮动