Clear: role of both

Clear: both; when to use clear: both; As explained in the CSS manual, the value of this attribute specifies that the edge of a floating object is not allowed. This attribute is used to control the physical location of the float attribute in the Document Stream. When the float attribute is set, the physical location of the object is already out of the document flow. However, most of the time we want the file flow to recognize float or float) the following elements are not affected by float. In this case, clear: both; must be used to clear: both; example: <p style = "float: left; width: 100px; "> This is the 1st column, </p> <p style =" float: left; width: 400px; "> This is the 2nd column, </p> <p> This is under the column. </P> If the floating point is not cleared, the 3rd <P> texts will be combined with the first and second lines. Therefore, we add a floating point to the 3rd text records. <P style = "float: left; width: 100px;"> This is the first 1st columns. </p> <p style = "float: left; width: 400px; "> This is the 2nd column, </p> <p clear: both;> This is under the column. </P> in CSS, clear: both; can end clear: both in floating CSS before it appears; can end the floating syntax before it appears: clear: none | left | right | both parameter: none: Float object both is allowed on both sides: Float object left is not allowed: Float object right on the left is not allowed: float objects on the right are not allowed. Description: the value of this attribute indicates that float objects are not allowed. See float attributes. The corresponding script features are clear example: div {clear: left} img {float: right} <div style = "clear: both; "> </div> is mainly used in the structure of div sets. If the inner div is floating, clear floating is generally required. Otherwise, the inner div will go beyond the external div's frame and when to use clear: both; is very important, we usually use clear: both when we need to clear the floating; do not use clear: both lightly; because it also has a secondary role. let's write a clear: both; example: <div style = "float: left; width: 100px;"> clear: both 1st rows and 1st columns, </div> <div style = "float: left; width: 700px;"> clear: both 1st rows, 2nd columns, </div> <div style = "clear: both; "> clear: both row 2nd. </Div> effect: clear: both 1st rows, 1st columns, clear: both 1st rows, and clear: both 2nd rows.