第五节 css浮动属性 #前端开发 css浮动详解

第五节页面布局-浮动。

这一节说一下页面布局浮动。浮动的属性是float，它的只有 left，向左浮动，向右浮动。还有 no，就是不浮动，就是不给它这个属性，也是no。然后css是继承元素的浮动元素是什么？还有 clear 属性，就是清除元素周围的浮动。看一下代码，上一节的这些属性都删一下，刷新一下。

现在是有两div，就是两个div，一个是第三页网页，一个是第四个玩意，浮动属性。第一个div，向左浮动。第二个div，给它一个float right，向右浮动。看一下效果，这边都给了宽，都是300p 叉，然后刷新。刷新，没有保存，保存一下。

刷新，你看，我的第三个网页在左边，第四个网页在右边，它就是 float。左边float 右边，跟两个纸箱子是一样的。它的盒子模型，一个盒子在左边，一个盒子在右边，给它宽大一点。就比如说，我这盒子很大，六百劈叉，你看，它就跟地面似的。第一层只能乘乘六百，乘不了两个就会在第二层出现。

再给乘三百，然后都 float left，看一下刷新。看，它就并排的都朝着左边，然后这样一个一个地放，就跟码快递箱子一样，可以这样。

可想，再看一下 clear，属性 clear 属性，就是清除浮动元素。给它第二个div，给它一个 clear left，就是它左边的浮动清除掉。看一下效果，保存，保存之后刷新一下，看，它就没有了浮动效果。浮动看着很简单，但是用的时候还是挺多的，尤其是布局的时候。好了，就这样，拜拜。感谢观看。