float布局
float俩栏布局
<body>
<div style ="height: 500px;width:200px;">
</div>
<div style="float: left;background-color: aqua;width: 100px;height: 300px;">
</div>
<div style="background-color: bisque;width: 300px;height: 400px;padding: left 10px;;">
</div>
</body>
<!DOCTYPE html>
</html>
<head>
<meta charset="utf-8">
<title>float</title>
</head>
<body>
<div style="float:left;height: 188px;width: 700px;background-color: blue;">
</div>
<div style="float:right;width: 600px;height: 600px;background-color: aqua;">
</div>
<div style="background-color: aquamarine;width: 600px;height: 300px;">
</div>
</body>
</body>
flex布局
<!DOCTYPE html>
<html>
<title>felx</title>
<head>
<style>
.container{
display: flex;
}
.column {
flex: 1;
padding: 20px;
}
.column:first-child {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<p>This is the left column.</p>
</div>
<div class="column">
<p>This is the right column.</p>
</div>
</div>
</body>