css清除浮动的总结 与 BFC
程序员文章站
2024-01-26 10:06:52
...
清除浮动
css使用了浮动 导致了父元素的塌陷问题 要是用清除浮动
父盒子塌陷了
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background: red;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
float: right;
width: 400px;
height: 100px;
background: cyan;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
1 .clear清楚浮动
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background: red;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
float: right;
width: 400px;
height: 100px;
background: cyan;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
2 . overflow: hidden
给父盒子添加 overflow: hidden
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin: 60px;
width: 900px;
background: red;
overflow: hidden;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
float: right;
width: 400px;
height: 100px;
background: cyan;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
3 伪类 (常用)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin: 60px;
width: 900px;
background: red;
*zoom: 1;
}
.container::after {
content: "";
display: block;
/* 不能少 */
visibility: hidden;
/* 元素是不可见的。 */
clear: both;
overflow:hidden;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
float: right;
width: 400px;
height: 100px;
background: cyan;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
BFC
1. 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候Block Formatting Context提供了一个环境HTML元素在这个环境中按照一定规则进行布局
是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
2. 作用
形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局
- 利用BFC避免margin重叠。解决margin塌陷、margin合并、清除浮动流
- 左边定宽右边自适应两栏布局
- 子元素设置为浮动时,出现父元素盒子坍塌的问题
3. 触发方式
- float不为none (left right)
- position不为relative和static (absolute fixed)
- overflow为auto scroll和hidden
- display的值为table-cell或inline-bloc
上一篇： GWT通过JSNI打印Web页面内容