How to solve the problem of out of bounds in CSS

In this issue, Xiaobian will bring you about how to solve the problem of crossing boundaries in CSS. The article is rich in content and analyzes and narrates from a professional perspective. After reading this article, I hope you can gain something.

CSS related knowledge

(1)How to solve the margin-top boundary problem of the first child element of the parent element

1)Add border-top: 1px;--has side effects

2)Specify padding-top for parent element: 1px;--has side effects

3)Specify overflow:hidden for parent element;--has side effects

4)Add Pre-Content Generation to Parent Element--Recommended

CSS Code Copy content to clipboard

.parent:before { content: ' '; display: table; }

(2)How to solve the problem that the height of the parent element becomes 0 after all child elements float, and affects subsequent elements

1)Specify overflow:hidden for parent element;--has side effects

2)Specify height for parent element: height: xxx;--has limitations

3)Add post-content generation to parent elements--recommended

CSS Code Copy content to clipboard

.parent:after { content: ' '; display: table; clear: both; } The above is how to solve the problem of crossing the border in CSS shared by Xiaobian. If there is a similar doubt, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.