通过 BFC 实现页面布局
实现效果如图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.contain0 {
overflow: hidden;
width: 100px;
height: 100px;
background-color: pink;
}
.wrapper {
overflow: hidden;
}
.box1 {
height: 20px;
margin: 10px 0;
background-color: blue;
}
.box2 {
height: 20px;
margin: 20px 0;
background-color: blue;
}
.contain1 > .column:nth-of-type(1) {
float: left;
width: 200px;
height: 300px;
margin-right: 10px;
background-color: pink;
}
.contain1 > .column:nth-of-type(2) {
/* 创建bfc */
/* 不设宽度，实现宽度自适应 */
overflow: hidden;
height: 300px;
background-color: purple;
}
.contain2 > .column:nth-of-type(1),
.contain2 > .column:nth-of-type(2) {
width: 100px;
height: 300px;
background-color: blue;
}
.contain2 > .column:nth-of-type(1) {
float: left;
}
.contain2 > .column:nth-of-type(2) {
float: right;
}
.contain2 > .column:nth-of-type(3) {
/* 创建bfc */
/* 不设宽度，实现宽度自适应 */
overflow: hidden;
height: 300px;
background-color: pink;
}
.contain3 > .left {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
.contain3 > p {
background-color: blue;
/* 创建bfc */
/* 不设宽度，实现宽度自适应 */
overflow: hidden;
}
</style>
</head>
<body>
<h2>全部通过overflow:hidden，来变成BFC容器</h2>
<div class="contain0">
<div class="wrapper">
<div class="box1"></div>
</div>
<div class="box2"></div>
</div>
<div>============================================</div>
<h3>左侧宽度固定，右边自适应</h3>
<div class="contain1">
<div class="column"></div>
<div class="column"></div>
</div>
<div>============================================</div>
<h3>两侧宽度固定，中间自适应</h3>
<h4>
子元素浮动，子元素不浮动元素设置高度或者父元素overflow:hidden清除浮动，从而撑起父元素高度
</h4>
<div class="contain2">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div>============================================</div>
<h3>避免文字环绕</h3>
<div class="contain3">
<div class="left"></div>
<p>
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</p>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
