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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box_content{
     
				
			}
			.box{
     
				
			}
			.box1{
     
				
			}
			.box2{
     
				
			}
			.box3{
     
				
			}
			.box4{
     
				
			}
		</style>
	</head>
	<body>
		<div class="box_content">
			<div class="box box1"></div>
			<div class="box box2"></div>
			<div class="box box3"></div>
			<div class="box box4"></div>
		</div>
	</body>
</html>

其中box时给小盒子定义的公共class,box_content是父盒子的class,
box1,box2,box3,box4分别是子盒子的class

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

.box_content{
     
				width: 600px;
				background: greenyellow;
			}

父盒子是这个颜色
在这里插入图片描述
2.然后给四个小盒子一样的高度和宽度,这时就用到了公共class box
我们没有给大盒子设置高度,但是被小盒子撑开了
HTML-H5基本样式之---浮动的使用与清除_第1张图片
可见他们是竖着排列的,我们用左浮动现在让它横过来,我们需要在公共的class中也就是在box中添加一行代码,就可以了

.box{
     
				width: 100px;
				height: 100px;
				float: left;
			}

HTML-H5基本样式之---浮动的使用与清除_第2张图片
可见我们没有给大盒子设置高度,也就没有撑开,所以如果我们在下面再写东西就乱了,它就会以最外面的盒子进行排列,例如我们再与大盒子平齐的位置再写一个盒子class设置为box5,高度设置为原来小盒子的二倍
HTML-H5基本样式之---浮动的使用与清除_第3张图片

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

.box_content{
     
				width: 700px;
				background: greenyellow;
				overflow: hidden;
			}

此时下面添加的盒子就会按着顺序排列了,大盒子也撑开了
HTML-H5基本样式之---浮动的使用与清除_第4张图片
第二种清除浮动:只需给要撑开的盒子添加一个height高度即可

.box_content{
     
				width: 700px;
				background: greenyellow;
				/*overflow: hidden;  第一种清楚浮动*/
				height: 100px;/*第二种清除浮动*/
			}

HTML-H5基本样式之---浮动的使用与清除_第5张图片

第三种清除浮动:我们在大盒子里面添加一个空盒子即可
HTML-H5基本样式之---浮动的使用与清除_第6张图片

效果如图:
HTML-H5基本样式之---浮动的使用与清除_第7张图片

你可能感兴趣的:(html,H5,css,html,css3,html5)