Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.