Classic solutions to cross-border issues in CSS, cross-border css

Classic solutions to cross-border issues in CSS, cross-border css

8. CSS knowledge

(1) how to resolve the out-of-bounds margin-top of the first child element of the parent Element

1) Add border-top: 1px for the parent element; -- side effects

2) specify padding-top: 1px for the parent element; -- side effects

3) specify overflow: hidden for the parent element -- side effects

4) add pre-content generation for the parent element-recommended

. Parent: before {

Content :'';

Display: table;

}

(2) How can we solve the problem of changing the height of the parent element to 0 when all child elements are floating, and affecting subsequent elements?

1) specify overflow: hidden for the parent element -- side effects

2) Specify the height for the parent element: height: xxx; -- Limited

3) add post content generation for the parent element-recommended

. Parent: after {

Content :'';

Display: table;

Clear: both;

}