How does CSS set the height of the parent element
Most people do not understand the knowledge points of this article "CSS how to set height for parent elements", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "CSS how to set height for parent elements" article.
There are several ways to clear the effects of floating:
Set the height of the parent element
Code:
* {
Padding: 0
Margin: 0
}
.header {
Height: 30px
Line-height: 30px
Background-color: # 333
}
.header a {
Color: # fff
Text-decoration: none
}
Ul {
Float: right
}
Li {
Float: left
List-style: none
Padding-right: 20px
}
Home page
Article
Question and answer
Help
About
Exterior wall method: use a blank block-level element to add css style clear to clear floats
Note: block-level elements with clear style cannot add margin margin attributes
Code:
* {
Padding: 0
Margin: 0
}
.header {
/ * background-color: # 333; * /
}
.header a {
/ * color: # fff; * /
Text-decoration: none
}
Ul {
Float: right
}
Li {
Float: left
List-style: none
Padding: 5px 20px
}
.clearfix {
Height: 10px
Background-color: red
Clear: both
}
.main {
Color: # fff
Height: 100px
Background-color: blue
}
Home page
Article
Question and answer
Help
About
Main content
Inner wall method: use a blank block-level element to add css style clear to clear floats
Code:
* {
Padding: 0
Margin: 0
}
.header {
Background-color: # 333
}
.header a {
Color: # fff
Text-decoration: none
}
Ul {
Float: right
}
Li {
Float: left
List-style: none
Padding: 5px 20px
}
.clearfix {
Clear: both
}
Home page
Article
Question and answer
Help
About
The inner wall method has relative advantages over the outer wall method.
When the inner wall method is set, the parent element of the floating element will be stretched out, that is, it has a height.
Add an overflow:hidden to the parent element of a floating element
Original intention: means to remove and hide, and hide all the contents that overflow the border.
Code:
* {
Padding: 0
Margin: 0
}
.header {
Background-color: # 333
Overflow: hidden
}
.header a {
Color: # fff
Text-decoration: none
}
Ul {
Float: right
}
Li {
Float: left
List-style: none
Padding: 5px 20px
}
.main {
Color: # fff
Height: 100px
Background-color: blue
}
Home page
Article
Question and answer
Help
About
Main content
The above is about the content of this article on "how to set the height of the parent element by CSS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.
