<!DOCTYPE html>
<html lang="zh">
<head>
<link rel="stylesheet" href="../css/reset.css">
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: blue;
/* 浮动 float 主要为了制作水平方向布局
浮动不具有继承性
浮动后会取消外边距 下方的box会上来 并且在box1的下方
浮动元素不会越过前一个浮动元素且不会越过不浮动元素
浮动元素不会盖住文字 文字会环绕浮动元素
浮动后块元素不会独占一行并且不会自动填满一行
浮动后行内元素脱离文档流后可以设置宽高
其实脱离文档流后块元素和行内元素是一样的
*/
float:right;
}
.box1{
width: 300px;
height: 300px;
background-color: red;
float:right
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>