前端学习-BFC的作用

2022/1/12 6:07:52

编程Tag： 前端学习 flex float background color overflow BFC

本文主要是介绍前端学习-BFC的作用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box {

width: 100px;

height: 50px;

background-color: blue;

float: left;

}

.box1 {

width: 200px;

height: 200px;

background-color: red;

float: left

}

.box2 {

background-color: rgb(255, 0, 242);

border: indigo 20px solid;

/* BFC块级格式化上下文

作用：可以让父元素的宽高随子元素的宽高改变而改变

也会使元素布局独立化不受外界影响

激活BFC方法有很多种：

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible 可以避免高度塌陷

overflow: hidden;

overflow: auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

这篇关于前端学习-BFC的作用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！