4个box浮动

原创 2019-02-21 16:20:48 284
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="E:\front\boxfudong.css">

</head>

<body>

<div class="box"></div>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

</html>

--------------------------------------------

.box{

width: 200px;

height:200px;

background-color:black;

/* float: left;  /*向左浮动*/

position: relative; /*相对定位*/

left: 200px;

}


.box1{

width: 200px;

height:200px;

background-color: blue;

/* float: right*/

position: relative;

left: 300px;

}


.box2{

width: 200px;

height:200px;

background-color: chartreuse;

/* clear: both;  /*清除浮动对其的影响*/

position: relative;

left: 400px;

}


.box3{

width: 200px;

height:200px;

background-color: lightblue;

/* clear: both;  /*清除浮动对其的影响*/

position: relative;

left: 500px;

}



批改老师:韦小宝批改时间:2019-02-21 17:27:39
老师总结:css中的浮动相当重要 但是使用多了也有可能会照成布局混乱 要记得清除浮动哦!

发布手记

热门词条