15 .css-浮动
浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性。 float:表示浮动的意思。它有四个值。 none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 看一个例子 html结构: <div class="box1"></div> <div class="box2"></div> <span>路飞学城</span> css样式: .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } 我们会发现,三个元素并排显示,.box1和span因为是左浮动,紧挨在一起,这种现象贴边。.box2盒子因为右浮动,所以紧靠着右边。 那么浮动如果大家想学好,一定要知道它的四大特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 浮动元素脱标 脱标:就是脱离了标准文档流 看例子 <div class="box1">小红</div> <div