<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.box{
background-color: aquamarine;
/* 元素左右浮动导致高度坍塌BUG */
/* height: 300px; */
overflow: auto;/* BFC */
/* display: inline-block; */
/* float: left; */
/* 以上多种都可解决但overflow: auto;效果最佳 */
}
.box1{
float: left;
width: 200px;
height: 200px;
background-color: aqua;
/* float: none;默认不浮动
float: left;左浮
float: right;右浮*/
}
.box2{
float: right;
width: 300px;
height: 300px;
background-color: black;
}
.banner{
width: 100%;
height: 600px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="banner"></div>
<div></div>
<!--
Float，会使元素向左或向右移动，其周围的元素也会重新排列。
float会使元素向左或者向右移动，只能左右,不能上下
浮动元素碰到包含框或另一个浮动框，浮动停止。
浮动元索之后的元素将国绕它。之前的不受影响。
-->
</body>
</html>
CSS Float(浮动)
本文含有隐藏内容，请 开通VIP 后查看