css浮动
一、什么是浮动
浮动怎么理解?
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动会脱离文档流,相当于此框像图层一样向外飘起来了,原本它的位置会被下方的内容顶上,导致下方的内容和浮动的重合一部分。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的特点:
1.脱离文档流 ,浮动不占位。
2.转化为内联块,默认排列成一行,遇到边界自动换行。
3.层级高于其他元素。
图源:w3cschool
二、元素如何浮动
浮动
float: left;
float:right;
float:none;
清除浮动:
clear:left;
clear:right;
clear:both;
三、清除浮动方法
为什么要清除浮动?
当元素在父盒子中时,默认情况下,父div的高度是auto,它可以被子div任意的撑大。如果没有给父高度,那么元素内容高度会撑起父盒子来,那么,当元素浮动起来,相当于往外脱离了父盒子,此时父盒子空间直接塌缩为一条顶部的线,高度为0。父盒子下面的内容也会顶上来,为了避免这种情况,要清除子元素浮动带来的影响。
由上述,c没添加margin-top的话,顶端会与浮动元素的下边缘重合。
1.给父级加上高度
优点:简单粗暴有效。
缺点:后面代码需要不断的改这个高度。
<style type="text/css">
.father{
height: 200px;
border: 1px solid #000;
}
.a{
border: 5px solid green;