This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Thank you for meeting me. Hi, I’m Ken

Author: Please call me Ken link: juejin.cn/user/109118… Source: gold mining copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the homepage).

This blog is suitable for those who are new to HTML and those who want to review after a long time

🌊🌈 About:

6.1_ Element float

The layout looks dull and ugly, so how do you rearrange the page? You need to float the elements. This section explains the floating of elements in detail.

6.1.1_ Element float attribute float

In CSS, float is defined by the float property. The float of an element means that the element with the move property is set out of control of the standard document flow. The process of moving to a specified position in its parent element.

Its basic syntax format is:

The selector {float: Attribute value; }Copy the code

Common property values for float:

Attribute values describe
left Elements float to the left
right The element floats to the right
none Elements do not float (default)

Example: Learn how to use the float property,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Element float</title>
<style type="text/css">

.father {
background: #ccc;  /* Define the style of the parent element */
border: 1px dashed # 999;

}

.box01..box02..box03 { /* Define the style of box01, box02, box03 */
height: 50px;
width: 50px;
background: #FF9;
border: 1px solid #F33;
margin: 15px;
padding: 0px 10px;
}



p {    /* Define the style of paragraph text */
background: #FCF;
border: 1px dashed #F33;
padding: 0px 10px;
}



</style>
</head>
<body>

<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
</div>

<p>12</p>

<! -- do not define the float property, the value of the float property is its default value none-->

</body>
</html>
Copy the code

After running, box01, box02, box03, and paragraph text are listed from top to bottom. You can see that if you do not float an element, the element and its inner children are displayed in the style of a standard document flow, with block elements occupying the entire line of the page.

Next, take box01 as the set object and apply the left float style to it. The CSS code is as follows:

.box01 { /* Define box01 left float */
float: left;
}
Copy the code

When running, it’s easy to see that box01, which sets the left float, is no longer controlled by the document flow and appears at a new level.

On the basis of the above example, continue to set the left float for Box02, the specific CSS code is as follows:

.box01..box02 {  /* Define box01 and box02 to float left */
float: left;
}
Copy the code

With box01, Box02, and Box03 neatly lined up on the same line, you can see that by applying the “float: left” style you can float both Box01 and Box02 to the left, out of control of the standard document stream.

For box03, set the left float. The CSS code is as follows:

.box01..box02..box03 {     /* Define the left float of box01, box02, box03 */
float: left;
}
Copy the code

When this code runs, boxes box01, Box02, and Box03 are lined up on the same line, while the surrounding paragraphs of text surround the boxes, creating a web page effect of mixed text.

Note that the other property value of float, “right,” is also often used in web page layout and is used in the same way as the value of the “Ieft” property but in the opposite direction. “Float: right; “The elements of the style will float to the right, and the reader will learn to draw inferential lessons.

  • Note: When you define both float and margin-left or margin-right attributes on an element, the left or right margin that appears in IE6 will be twice the value of the set margin-left or margin-right. This is the “IE6 double margin” problem that often appears in web pages.

6.1.2 clearing floating Clear

In web pages, since floating elements no longer occupy the location of the original document flow, the use of floating will affect the following adjacent fixed elements.

For example, box03 is defined in the example above, and it changes its position due to the floating elements around it. If you want to avoid the impact of the float on other elements, you need to clear the float. In the CSS, use the clear property to clear the float. The basic syntax format is as follows.

The selector {clear: Attribute value; }Copy the code

Common values for clear:

Attribute values describe
left Do not allow floating elements on the left (clear effects of floating on the left)
right Do not allow floating elements on the right (clear effects of floating on the right)
both Both left and right floating effects are cleared

Case in point: the < p> tag applies the clear attribute to clear the impact of floating elements on paragraph text,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Clears the left float of an element</title>
<style type="text/css">

.father {   /* Define the style of the parent element */
background: #ccc;
border: 1px dashed # 999;
}

.box01..box02..box03 { 
/* Define the style of box01, box02, box03 */
height: 50px;
line-height: 50px;
background: #FF9;
border: 1px solid #F33;
margin: 15px;
padding: 0px 10px;
float: left; /* Define the left float of box01, box02, box03 */
}

p {  /* Define the style of paragraph text */
background: #FCF;
border: 1px dashed #F33;
margin: 15px;
padding: 0px 10px;
clear: left;  /* Clear left float */
/* The previous line clears the effect of floating elements to the left of paragraph text */
}

</style>
</head>
<body>

<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</d1v>
<p>111</p>
</div>

</body>
</html>
Copy the code

After running, you can see that after the float to the left of the paragraph text is cleared, the paragraph text is no longer affected by the floating elements, but instead is arranged in a single line under the floating elements box01, box02, and Box03 in the default arrangement of the elements themselves.

** It is important to note that the clear property can only clear the floating effects of the left and right sides of the element. ** However, when making web pages, you often encounter some special floating effects. For example, if you float a child element without defining its parent’s height, the child’s float will affect the parent,

Example: To demonstrate the above example,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Remove the floating</title>
<style type="text/css">

.father {  /* No height is defined for the parent element */
background: #ccc;
border: 1px dashed # 999;
}

.box01..box02..box03 {
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed # 999;
margin: 15px;
padding: 0px 10px;
float: left;
/* Define box01, box02, box03 to float left */
}

</style>
</head>
<body>

<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
</div>

</body>
</html>
Copy the code

This code defines a left float for box01, box02, and box03, and does not set the height for the parent element.

After running, the parent element with no height set becomes a straight line due to the float of the child element, that is, the parent element cannot adapt to the height of the child element.

We know that the child element and the parent element are nested, and there is no left or right position, so using the clear attribute cannot clear the influence of the floating child element on the parent element. How do you clear the float in this case? Detailed introduction is as follows.

  • < div>, < p>, < hr />, and so on. < div>, < p>, < hr />, and so on. _ Case: Demonstrates how to clear a float with an empty flag,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Empty flag clears float</title>
<style type="text/css">

.father {  /* No height is defined for the parent element */
background: #ccc;
border: lpx dashed # 999;
}

.box01..box02..box03 {
height: 50px;
line-height: 50px;
background: #f9c;
border:1px dashed 999;
margin: 15px;
padding: 0px 10px;
float: left;
/* Define box01, box02, box03 to float left */
}

.box04 { 
clear: both;
}

/* Clear :both; * /

</style>
</head>
<body>

<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
<div class="box04"></div>
<! -- Add null tag after floating element -->
</div>

</body>
</html>
Copy the code

Box01, box02, box03 add an empty div with class box04, and then apply “clear: both; “Style.

The parent element is pushed apart by its children, meaning that the float of the child element has no effect on the parent element.

It should be noted that while the above method can clear the float, it adds meaningless structural elements (empty tags), so it is not recommended in practice.

(empty flag) Therefore not recommended in practice.

  • Use the overflow attribute to clear the float _ apply “overflow: hidden; “You can also clear the effect of the float on the element, which makes up for the lack of empty tags clearing the float.

Example: Show how to clear float using overflow property,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The overflow property clears float</title>
<style type="text/css">

/* No height is defined for the parent element */
.father {
background: #ccc;
border: 1px dashed # 999;
overflow: hidden;   /* Apply overflow:hidden; * /
}

.box01..box02..box03 {
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed # 999;
margin: 15px;
padding: 0px 10px;
float: left;
/* Define box01, box02, box03 to float left */
}

</style>
</head>
<body>

<div class="father">
<div class="box01">box01</div>
<div class="box02">box02</div>
<div class="box03">box03</div>
</div>

</body>
</html>
Copy the code

Apply “overflow: hidden; “Style to clear the effect of child element float on the parent element.

The parent element is pushed apart by its children, which means that the influence of the children floating on the parent element is no longer present.

  • Method three: Use after pseudo-objects to clear floats

Floating can also be cleared using after pseudo-objects, but this method only works with Internet Explorer 8 and above and other non-Internet Explorer browsers.

Also, note when using after pseudo-objects to clear floats:

(1) You must set “height: ()” for the element pseudo-object that you want to clear float; “Style, otherwise the element will be several pixels higher than its actual height.

(2) You must set the content property in the pseudo-object. The value of the property can be null, such as “content:” “; .

Example: Demonstrates how to float clearly using after pseudo-objects.

<! doctypehtml>
<htm1>
<head>
<meta charset="utf-8">
<title>Use after pseudo-objects to clear floats</title>
<style type="text/css">

.father {      /* No height is defined for the parent element */
background: #ccc;
border: 1px dashed # 999;
}

.father:after {/* Apply the after pseudo-object style to the parent element */ display: block;clear: both;
content:"";
visibility: hidden;
height: 0;
}

.box01..box02..box03 {
height: 50px;
line-height: 50px;
background: #f9c;
border: 1px dashed # 999;
margin: 15px;
padding: 0px 10px;
float: left;  /* Define box01, box02, box03 to float left */
}

</style>
</head>
<body>

<div class="father">
<div class="box01">box01</d1v>
<div class="box02">box02</d1v>
<div class="box03">box03</div>
</div>

</body>
</html>
Copy the code

Lines 11 to 17 apply the After pseudo-object style to the parent element to clear the float.

The parent element is pushed apart by its children, which means that the influence of the children floating on the parent element is no longer present.

6.2 _overflow properties

The Overflow property is an important property in CSS. When the elements in the box exceed the size of the box itself, the content will overflow. If you want to specify how the overflow content is displayed, you need to use the overflow property, which has the following basic syntax.

The selector {overflow: Attribute value; }Copy the code

Common property values for overflow:

Attribute values describe
visible Content will not be pruned and will be rendered outside the element box (default)
hidden Overflow content is trimmed, and the trimmed content is not visible
auto Generate scrollbars as needed, that is, adaptive to what is to be displayed
scroll Overflow content is trimmed and the browser always displays the scroll bar

Example: To demonstrate the use and effect of the overflow property,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Overflow attributes</title>
<sty1e type="text/css">div { width: 100px; height: 140px; background: #F99; overflow: visible; /* Overflow content is rendered outside the element box */}</style>
</head>
<body>

<div>When elements in a box exceed the size of the box itself, the content will overflow, and if you want to regulate the display of the resulting content, you need to use the overflow property, which is used to regulate the display of the overflow content in the element.</div>

</body>
</html>
Copy the code

Line 11 passes “overflow: visible; “Style, which defines that overflow content will not be trimmed and will be rendered outside the element box. In general, there is no need to set overflow’s property to visible unless you want to override the value it sets elsewhere.

After running, the overflow is not pruned, but appears outside the element box.

If you want overflow to be trimmed and invisible, you can set overflow to hidden. Next, change line 11 to the following,

overflow: hidden;/* Overflow content is trimmed and not visible */
Copy the code

After running, you can see that using “overflow: hidden” can clip overflow content, and the trimmed content is not visible.

In addition, you can define the overflow property value as auto if you want the element box to be more adaptive to the amount of its content and generate a scrollbar when the content overflows, otherwise, no scrollbar is generated. Change line 11 to the following,

overflow: auto;/* Generate active bar */ as needed
Copy the code

After running, you can find that a scroll bar is generated on the right side of the element box. You can drag the scroll bar to view the overflow content. As the contents of the box decrease, the scrollbar disappears. It is worth mentioning that when the overflow property is defined as scroll, the element box also generates a scroll bar. Change line 11 to the following,

overflow: scroll; /* Always show the scroll bar */
Copy the code

After running, you can see that horizontal and vertical scrollbars appear in the element box. With the “overflow: auto; “Overflow: scroll; “, the horizontal and vertical scrollbars in the element box always exist whether or not the element overflows.




That’s the end of today’s introductory study

Peace

🌊🌈

HTML page elements and attributes (Note 2) HTML page elements and Attributes (Note 3) Ken’s HTML, CSS starter guide _CSS3 selector (note 4) Ken’s HTML, CSS starter guide _CSS box model (note 5) one Ken’s HTML, CSS starter guide _CSS box model (note 5) two Ken’s HTML, CSS guide for getting started _CSS box model (note five) three

🌊🌈 About postscript:

Thank you for reading, I hope it can help you if there are flaws in the blog, please leave a message in the comment area or add a public account in the profile of the home page to chat with me privately

Thank you for your advice

Ken has recently created a nuggets technology exchange group for interested players to join[Gold mining technology Exchange Group]Welcome to the exchange and discussion

Original is not easy, “like” + “comment” thanks for supporting ❤