再次看到html标签,看到了很多以前没注意的问题,现在说说浮动的问题。
浮动用float,这个不用多说了吧。
float的属性:left, right, 默认是none;
应用场景:1.文字环绕一个元素显示 2.很多个容器横向排列的的时候
什么是文字环绕元素呢?或许有许多小白不懂。这里给上一张图说明一下
这种文字在元素里面的,就是文字环绕元素。
float的特点:1.元素浮动之后,是脱离文档流(飘起来不占位置),所以下面的元素会顶上去,占据浮动元素原来的位置。
2.多个元素浮动之后会横向排列
有很多人会问,既然应用场景中说float是为了解决多个元素横向排列问题的,那么为什么多个元素使用float后,反而还会横向排列呢?这该怎么解决呢?
这就是我要说的我们一般学习这里,容易忽略的内容: 清除浮动属性 clear
clear:left,right,默认是none;
这里说的清除,不是说清除了浮动,而是打破元素之前的排列方式,如果是横向的排列的就会变成竖向排列的,但是float还是飘着的
clear只会影响自己。
下面附上几行代码,有兴趣的可以自己去试试。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ 100px; height: 100px; background: blue; float: right;} .box2{ 150px; height: 150px; background: pink; float: right;clear: right;} .box3{ 250px; height: 250px; background: yellow; float: right; clear: right;} .box4{ height: 800px; background: green;clear: both; 100px;} </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">234</div> </body> </html>