HTML-H5基本样式之—浮动的使用与清除

css浮动是一种使元素脱离文档流的方法,会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。

相信大家在进行页面布局的时候会出现这样的问题在页面的默认页面流时是从上到下进行排列的,这是就会出现问题,怎样改变这种布局呢,我们就用到了css flex弹性布局或者css的Float(浮动),下面我们展开对浮动的简单应用:

1.首先我们打开常用的编辑软件,我用的是Hbuder,当然用别的也可以
我们在里面定义一个div当大盒子给它的class属性起一个名字,在大盒子里面我们定义四个div(随便几个)给他们定义class属性,这里我首先给它们都在前面定义一个公共的class属性box在后面在分别给他们添加专属的class属性

2.此时我们需要给父盒子一个宽度,以及颜色

父盒子是这个颜色

HTML-H5基本样式之---浮动的使用与清除
可见他们是竖着排列的,我们用左浮动现在让它横过来,我们需要在公共的class中也就是在box中添加一行代码,就可以了

HTML-H5基本样式之---浮动的使用与清除

3.这是我们只需要在刚才的大盒子那里清除浮动就可以,清楚浮动有三种方法
第一种:
我们只需要在之前的大盒子那里加一段代码

此时下面添加的盒子就会按着顺序排列了,大盒子也撑开了

HTML-H5基本样式之---浮动的使用与清除

第三种清除浮动:我们在大盒子里面添加一个空盒子即可

HTML-H5基本样式之---浮动的使用与清除

来源:小小码农呀

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2020年6月17日
下一篇 2020年6月17日

相关推荐