CSS——浮动布局(补充)

CSS——浮动布局(补充)

上次我们说到浮动布局和定位布局;
但浮动当时并没有讲的太清楚,所以今天来继续说说浮动。

首先还是将最基本的盒子搞定;


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">
     #wrapper{
      
     	width: 200px;
     	height:200px;
     	margin:0 auto;
     	background-color: pink;
     }
     #content{
      
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	
     }
     #content1{
      
     	width: 50px;
     	height:50px;
     	background-color: red;

     }
     #content2{
      
     	width:50px;
     	height:50px;
     	background-color: blue;
     }
    

	style>
head>
<body>
	<div id="wrapper">
		<div id="content">cdiv>
		<div id="content1">1div>
		<div id="content2">2div>
	div>
body>
html>

CSS——浮动布局(补充)_第1张图片
我们首先给元素依次加上左浮效果;

 #contentc{
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	float:left;
     	
     }
     #content1{
     	width: 50px;
     	height:50px;
     	background-color: red;
        float:left;
     }
     #content2{
     	width:50px;
     	height:50px;
     	background-color: blue;
     	float:left;
     }

CSS——浮动布局(补充)_第2张图片
图片依次排成一排,但我们只给第一个盒子加上左浮由会出现什么情况呢?

  #contentc{
     	width:50px;
     	height:50px;
     	background-color: black;
     	color: white;
     	float:left;
     	
     }
     #content1{
     	width: 50px;
     	height:50px;
     	background-color: red;
   
     }
     #content2{
     	width:50px;
     	height:50px;
     	background-color: blue;
     	     }

我们将1和2盒子的左浮效果去掉;
CSS——浮动布局(补充)_第3张图片
红色盒子明显消失了,仔细一看我们会发现蓝色盒子的左上方的数字1和2重叠在一起了。
那么为什么会出现这种情况呢?

所谓浮动仅从字面理解它一定和漂浮有关,而这种现象便是c盒子上浮导致1盒子跑去占据了c盒子原本的第一行,同理2盒子也是一样,但1盒子中的内容并没有随着盒子一起运动。

(侧视图)
CSS——浮动布局(补充)_第4张图片
这样大家可能更好理解。

我们给盒子2加上右浮;
CSS——浮动布局(补充)_第5张图片
很明显盒子1确实在c盒子的下面,假如盒子1没有在c盒子下面,那么2盒子右浮应该并排在c的最有端,即图上画出来的位置。CSS——浮动布局(补充)_第6张图片
但是2并没在其位置,所以证明了盒子1在c下面并单独占一行(块状元素的特性);
所以大家在用浮动布局时一定要注意一些细节。
谢谢大家——Miziguo >_<

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