A detailed introduction to several ways to clear floats in CSS

What is float?

Features: 1--Floating elements will not occupy the space of the standard flow, but will affect the layout of the text in the standard flow. Floating only floats left and right.
2--The position of floating element A is related to the previous element. The top of A is aligned with the top of the previous element if the previous element has a float, and with its bottom if there is no float.
3--For a child box in a parent box, if one of the children is floated, the other children need to be floated in order to display one line.
4--After the element is floated, if the width and height are not set, the element will set the size of the content according to the amount of content and will have the attributes of the inline block element.
5--After the element is floated, if the parent element does not set a height. Will cause the height of the parent element to collapse.
solve this problem?
-----Add attributes to the parent element: overflow:hidden; hide the excess part

overflow attribute:
When the elements in the box exceed the size of the sunspot itself, the content Display mode
visible: the content will not be trimmed and will be presented outside the element box (default)
hidden: will be trimmed and hidden, you can use this attribute to clear the float
auto: adaptive display scroll bar
scroll: The content will be trimmed and the scroll bar will be displayed

bfc:
Overflow can trigger the bfc of the element, allowing the element to have the space and permissions for typesetting. All elements within the bfc are based on The parent element performs typesetting and layout, and all parent elements have wrapping properties. This is the principle that solves the problem of height collapse.
Floating, positioning, overflow, display, table, table-cell can all trigger bfc.

Clear floats:
--The element will be displayed in the standard stream only when there are no floating elements on the left and right sides of the current element.
--Four ways to clear floats:
1. Use empty markers to clear floats and put them on the wall. Add tags.
Add a

after the floating label, do not set the width and height and then set .clearboth{clear:both}, and then put the required label in this space Just after the label
2. Use the overflow attribute to clear the float. Will cause accidental injury.
overflow:hidden;
3. Use the after pseudo-object to clear floats
4. Use the before after pseudo-object to clear floats
clearfix (a combination of methods 2, 3, and 4, commonly used).

.clearfix
   父盒子要把子盒子包裹住，触发bfc同时清除前后浮动。
   .clearfix{
      display:table;<!-- 触发dfc -->

   }
   .clearfix:before,.clearfix:after{
      content:"";
      display:block;
      clear:both;
      height:0;
   }
   在ie6中display:table;不能触发dfc，所以用以下方式进行触发
   .clearfix{
      _zoom:1;
   }

Usage:

<p class="top">top</p>
	<p class="clearfix">
	    <p class="left">left</p>
	    <p class="right">right</p>
	</p>			
	<p class="bottom">bottom</p>

.clearfix{
			 	display: table;/* 触发nfc */
			 }
			 .clearfix:before,.clearfix:after{
				/* 前后加一个空的标签清除浮动 */
				content: "";
				display: block;
				height: 0;
				clear: both;
			 }
			 .clearfix{
			 	_zoom:1;/* 为了兼容ie6 */
			 }

The above is the detailed content of A detailed introduction to several ways to clear floats in CSS. For more information, please follow other related articles on the PHP Chinese website!