前言

常见的后台管理页面，左侧固定宽度展示操作菜单栏，右侧显示左侧展示管理内容。
这是一种最常见的左侧固定，右侧自适应布局方式。

左侧固定，右侧自适应布局

在container1里面写2个div

<body>
<div class="container1">
 <div class="left">
 <p>左侧菜单栏1</p>
 <p>操作项1</p>
 <p>操作项2</p>
 <p>左侧菜单栏2</p>
 <p>操作项1</p>
 <p>操作项2</p>
 </div>
 <div class="right">
 <p>这是右边展示内容，右边展示内容，右边展示内容，右边展示内容，写正文看看</p>
 </div>
</div>
</body>

让2个div元素一左一右显示，实现方式，左边的div设置float,右边设置overflow：hidden

 <style>
 .container1{
 padding: 10px;
 border: 1px solid #d43f3a;
 }
 .left{
 background: green;
 float: left;
 width: 200px;
 margin-right: 10px;
 border: 1px solid #d412ce;

 }
 .right{
 background: orange;
 border: 1px solid #d412ce;
 overflow: hidden; /*右边盒子overflow:hidden触发bfc*/
 }
 </style>

页面效果

如果左边float高度超出，会出现上面的情况，下面有2种方法清除浮动

清除浮动（伪元素）

第一种解决办法，可以在子元素这一层，加一个空的div层：<div style="clear:both"></div>

<div class="container1">
 <div class="left">
 <p>左侧菜单栏1</p>
 </div>
 <div class="right">
 <p>这是右边展示内容，右边展示内容，右边展示内容，右边展示内容，写正文看看</p>
 </div>
 <div style="clear:both"></div>
</div>

但一般不推荐这样做，需要多维护一个div元素。优化方法可以使用css 给元素后面加一个伪元素:after

 <style>
 .container1{
 padding: 10px;
 border: 1px solid #d43f3a;
 }
 .left{
 background: green;
 float: left;
 width: 200px;
 margin-right: 10px;
 border: 1px solid #d412ce;

 }
 .right{
 background: orange;
 border: 1px solid #d412ce;
 overflow: hidden; /*右边盒子overflow:hidden触发bfc*/
 }
 /*清除浮动*/
 .container1:after{
 content: "";
 height: 0;
 line-height: 0;
 display: block;
 visibility: hidden;
 clear: both;
 }
 </style>

实现效果：左边宽度固定，右边自适应

清除浮动（overflow: hidden）

第2种解决方法更优雅一点，也是代码量最少的，可以在上一层container1这里加一个overflow: hidden
(添加zoom: 1;可以解决Ie浏览器适配问题)

 <style>
 .container1{
 padding: 10px;
 border: 1px solid #d43f3a;
 overflow: hidden;
 zoom: 1;
 }
 .left{
 background: green;
 float: left;
 width: 200px;
 margin-right: 10px;
 border: 1px solid #d412ce;

 }
 .right{
 background: orange;
 border: 1px solid #d412ce;
 zoom: 1;
 overflow: hidden; /*右边盒子overflow:hidden触发bfc*/
 }
 </style>

实现效果是一样的

更多页面布局方式参考https://blog.csdn.net/caicai1171523597/article/details/86642535
overflow相关知识点https://blog.csdn.net/qq_41638795/article/details/83304388
CSS 浮动float属性详解https://blog.csdn.net/qq_36595013/article/details/81810219

2021年第 9 期《python接口web自动化+测试开发》课程，10月17号开学!

加量不加价（新增postman, 赠送selenium和python基础2个课）

本期上课时间：10月17号-1月9号，每周六、周日晚上20:30-22:30

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。