[CSS] CSS clear floating several methods-Clear floating

Clear-floating

There are several ways to clear floating CSS: Clear floating
GitHub link (downloadable experience): https://github.com/hcq29/Clear-floating

How do elements float?

1. The element is floating in the horizontal direction. At this time, the element can only move left and right, but not up and down.
2. A floating element will try to move to the left or right until its outer edge touches the border of the containing box or another floating box.
3. The elements after the floating element will surround it.
4. Elements before the floating element will not be affected.
5. If the image is floating to the right, the following text stream will wrap around it to the left:

The Float of CSS will move the element to the left or right, and the surrounding elements will also be rearranged.

Floating application scenarios

1. When applied to images, the initial purpose of float was to wrap around text, allowing text to wrap around the picture.
2. The list is arranged horizontally.
3. Achieve two-column layout & three-column layout

Ways to clear floats

Method 1: Insert at the bottom: clear: both;

Add an element after the last floating element, set clear: both; for it, at this time the parent element will detect the highest element in the child element, and then use the highest element as the height of the parent element.

<div class="fahter">
    <div class="big">big</div>
    <div class="small">small</div>
    <div class="clear">额外元素法</div>
</div>

.fahter {
    
    
	width: 400px;
	border: 1px solid deeppink;
}

.big {
    
    
	width: 200px;
	height: 200px;
	background: darkorange;
	float: left;
}

.small {
    
    
	width: 120px;
	height: 120px;
	background: darkmagenta;
	float: left;
}

.footer {
    
    
	width: 900px;
	height: 100px;
	background: darkslateblue;
}

.clear {
    
    
	clear: both;
}

Method 2: Add overflow: auto; to the parent element

The value of overflow can be auto or hidden, and BFC will be triggered at this time.

<div class="fahter">
	<div class="big">big</div>
	<div class="small">small</div>
</div>
<div class="footer"></div>

Add overflow: auto to the parent element,

.fahter {
    
    
    width: 400px;
    border: 1px solid deeppink;

    overflow: hidden;   /* 触发BFC */
}

.big {
    
    
    width: 200px;
    height: 200px;
    background: darkorange;
    float: left;
}

.small {
    
    
    width: 120px;
    height: 120px;
    background: darkmagenta;
    float: left;
}
.footer {
    
    
	width: 900px;
	height: 100px;
	background: darkslateblue;
}

Method 3: Pseudo-element

<div class="fahter clearfix">
	<div class="big">big</div>
	<div class="small">small</div>
</div>
<div class="footer"></div>

.fahter {
    
    
	width: 400px;
	border: 1px solid deeppink;
}

.clearfix:after{
    
    
	content:"";/*设置内容为空*/
	height:0;/*高度为0*/
    line-height:0;/*行高为0*/
	display:block;/*将文本转为块级元素*/
	visibility:hidden;/*将元素隐藏visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。*/
	clear:both;/*清除浮动*/
}
.clearfix{
    
    
	*zoom:1;/*为了兼容IE ,ie6清除浮动的方式 *号只有IE6-IE7执行*/
}
.big {
    
    
	width: 200px;
	height: 200px;
	background: darkorange;
	float: left;
}

.small {
    
    
	width: 120px;
	height: 120px;
	background: darkmagenta;
	float: left;
}

.footer {
    
    
	width: 900px;
	height: 100px;
	background: darkslateblue;
}

Method 4: Double pseudo elements

.clearfix:before,.clearfix:after {
    
    
     content: "";
     display: block;
     clear: both;
}
.clearfix {
    
    
     *zoom: 1;
 }

Seeing this, don’t forget to pour yourself a glass of warm water~