Front-end CSS layout BFC

Hello, everyone! Today to sort out the front end of the CSS layout of a knowledge point – BFC(Block fomatting Context), if there is something wrong with the knowledge point, looking for partners to help point out, progress together ~

What is BFC

BFC can be understood as establishing a layout container, which is laid out in its own way and does not affect the elements outside the container.

2. BFC features

• 1. The layout in the BFC is the same as in a normal flow, for example the boxes are arranged vertically.
• 2. Boxes belonging to the same BFC will generate margin overlap.
• 3. The left side of the margin of the element in the container will touch the left side of the border of the container.
• 4.BFC containers do not overlap float elements.
• 5. Elements inside the BFC do not affect elements outside the BFC.
• 6. When the BFC container calculates the height, the internal float element participates.

3. How to generate BFC

• The root element
• Float Float element that is not None.
• Absolute positioning element. (the position: fixed; Or the position: absolute;)
• Overflow value is not a visible element.
• display:flex; And display: inlie – block; And display: table – cell; And so on.

Four, the instance,

• 1. Generate a BFC container.

<! <style>. Wrap {background-color: RGB (51, 51, 51);#ccc;
		}
		.fl	{
			float: left;
			background-color: yellow;
		}
		.fl>div {
			border:1px solid # 333;
		}
	</style>
	<div class="wrap">
		<div class="fl">
			<div class="div"> This is div-1 </div> <div class="div"> this is div-2 </div> </div> Generate a BFC container generate a BFC container generate a BFC container generate a BFC container generate a BFC container generate a BFC container </div>Copy the code

• 2. Generate margin overlap

<! < span style>. P1 {margin:10px; background-color:#ccc;
		}
		.p2 {
			margin:10px 0;
			background-color: #eee;
		}
	</style>
	<div class="p1"> This is text 1111111111111111</div> <div class="p2"> This is the text 22222222222222</div>Copy the code

<! < span style>. P1 {margin:10px; background-color:#ccc;
		}
		.wrap {
			overflow:hidden;
		}
		.p2 {
			margin:10px 0;
			background-color: #eee;
		}
	</style>
	<div class="p1"> This is text 1111111111111111</div> <div class="wrap">
		<div class="p2"> This is text 22222222222222</div> </div>Copy the code

• 3. Use the BFC for left and right layout

<! < span style>.wrap {}.float: left;
			width: 120px;
			background-color: #eee;
			height: 300px;
		}
		.main {
			background-color: #ccc;
			height: 400px;
			overflow:hidden;
		}

	</style>
	<div class="wrap">
		<div class="fl"> left </div> <div class="main"</div> </div>Copy the code

(Corresponding to feature 4 above – BFC containers do not overlap float elements)

• Fixed float element causing parent element height error

<! < span style>. Wrap {background-color: RGB (51, 51, 51);#eee;
			overflow:hidden;
		}
		.fl	{
			float: left;
			background-color: #ccc;
			height: 100px;
		}
		.con {
			height: 30px;
		}
	</style>
	<div class="wrap">
		<div class="fl"> Float element </div> <div class= 100px height"con"> This is text this is text this is text this is text this is text this is text this is text </div> </div>Copy the code

The above are some knowledge points and applications of BFC sorted out by me.