浮动
浮动的顺序贴靠特性
子盒子会按顺序进行贴靠,如果没有足够的空间,则会寻找前一个兄弟元素如下图所示:3号盒子会掉到2号盒子的下面
浮动的元素一定能设置宽高
浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档,一律能够设置宽度和高度,即使他是a标签或span标签
清除浮动
清除浮动: 浮动一定要封闭到一个盒子中,否则会对页面后续元素产生影响
方法一: 父元素添加 overflow: hidden
方法二:给后面的父盒子设置 clear: both 属性 – 会导致margin失效
方法三: 使用:after 伪元素 给盒子添加最后一个子元素,并给 ::after设置content:";clear:
both;displa:block;
方法四: 在两个父盒子之间隔一个携带clear: both的空盒子
博客介绍了CSS浮动相关知识。浮动元素有顺序贴靠特性,若空间不足会寻找前一个兄弟元素。浮动元素脱离标准文档流,不区分块级、行内元素,都能设置宽高。同时还给出了四种清除浮动的方法,避免对后续元素产生影响。
129





