css浮动

css浮动和清除浮动

在写页面的过程中,浮动是大家经常用的属性,在好多的排版布局中都是用的浮动;
定义:使元素脱离文档流,按照指定的方向移动,直到边缘碰到包含框或者另一个浮动框的边框为止;
浮动的属性:
1.float:left:左浮动
2.float:right 右浮动

元素浮动后的特性:
块级元素能够横排显示,
行内元素可以设置宽和高,
元素没有设置宽和高,宽度为内容宽度
元素脱离文档流,原来位置被其他元素所占据;
浮动后:针对在同一父元素中,目标元素会占据一个位置;
注意:浮动只能是,子元素在父元素中移动,如果父容器剩余空间不能容纳一个子元素,那么就换行;
具有浮动流属性的元素层次高于不是浮动属性的元素;

清除浮动:
子元素浮动之后,会造成父级盒子的高度崩塌,这样的话下面在进行继续布局的话会是页面布局发生错乱,不利于我们接下来的布局;

清除浮动方法:
1.给浮动元素的父元素设置高度;
2.在最后一个浮动元素下新添加一个元素;然后:【clear:both】
3.添加【after】伪元素:例如:xxx:after{content:""; display:block; clear:both;}

不足之处,还请见谅!!谢谢!

你可能感兴趣的:(css浮动)