首先给浮动一个定义:浮动就是程序中定位的一种
那么什么又是定位:元素框相对于其正常位置应该出现的位置在哪儿
浮动定位:解决了多个块级元素能在一行内显示。
什么是浮动定位。可以用如下几个特点定义。
特点一:将元素排除在文档流之外,即元素脱离文档流,不受默认排列方式(从上到下或者从左往右)的控制
特点二:浮动起来的元素将不再占用页面的空间。(元素从浏览器上原地拔起,从上往下依旧能看到浮动元素),有可能会压住其他的元素。
特点三:元素会停靠在包含框(父层元素)的左边或左边,或者停靠在已经浮动的元素的左边或者右边
特点四:元素无论怎么浮动,最终还是在包含框之内。
特点五:块级浮动之后,宽度自适应不是100%
特点六:行内元素浮动后,除了具备以上特点,它将变成块级元素,行内元素设置浮动多数是为了改变宽和高。
浮动属性:
float:定义当前元素浮动
取值:
none(默认没浮动)
left(浮动方向左边)
right(浮动方向右边)
下面做一个小练习希望对web爱好者有一个小小的帮助。可以拿代码过去看效果哦!
div{
width:200px;
height:200px;
}
#d1{
background-color:red;
float:right;
/*一共三个div块级元素上下排列,设置第一个div向右浮动,后面两个补上*/
}
#d2{
background-color:yellow;
}
#d3{
background-color:green;
}
更多知识关注小编,或者百度网络营销师钟震,钟震讲网络营销。会有很多相关知识,公众号网络营销师钟震,以后每天都会分享web,淘宝运营,竞价,网站建设和优化,社媒方面的知识。与大家共同进步。希望对您有一点点帮助,喜欢记得关注公众号。