html按照书写方式从上到下，从左到右进行排列。成为文档流或者普通流。
css两大功能：控制元素的外观；控制元素的位置（布局）
布局前提：浏览器交出页面布局的权限，交给用户，讲元素从文档中脱离出来。
脱离文档流的方法：浮动；决定定位。
浮动可以将元素在水平方向自由移动，垂直任然在文档流中
浮动元素对前面的元素无影响，主要会对浮动元素后面的元素影响
如说一个单独盒子不想受之前盒子的浮动影响，这个盒子可以使用clear属性 clear：both 清除浮动
收藏
<!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>浮动布局原理</title>
<style type="text/css">
.box1 {
width: 150px;
height: 150px;
background-color: #884868;
}
.box2 {
height: 200px;
width: 200px;
background-color: #456745;
}
/* 1.浮动只能在水平方向对元素进行左右浮动，垂直方向任然在文档流中
2.浮动对前面一个元素没有影响，只会对浮动元素后面的元素影响 */
.box1 {
float: left;
}
.box2 {
float: left;
}
.box3 {
width: 250px;
height: 250px;
background-color: #4848fe;
}
/* 右浮动 */
.box3 {
float: left;
}
.box4 {
width: 300px;
height: 300px;
background-color: #23ef23;
}
/* float:both 对box4清除浮动，both不受之前的元素影响 */
.box4 {
clear: both;
}
</style>
<!-- <link rel="stylesheet" href="static/css/demo1.css"> -->
</head>
<body>
<h1>php中文网</h1>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
