Use overflow hidden to clear the float and form a new bfc which will not be affected by the float height on the left. The height on the right is the height of the content in the ul. In addition, regarding the two-column adaptive layout, you can take a look at this demo
After looking at the demo, the root of the problem is that you added clearfix to ul, and the display of cleafix:before is set to table, so the height of ul is inaccurate. As for the principle, I need to check the information further.
For the first layout, the solution I can think of is: add overflow: auto; to the parent element p.right-content of the right content area to block the impact of floating on the left. The width of the container inside the right content area will not be set and will not be affected under normal circumstances.
PS: The current project style has been changed. The left side can use position:absolute; to meet the needs. Therefore, the left side has been modified to absolute positioning, so there is no floating. When the content on the right uses .cl, the content cannot be matched with float in one line, causing the height to become higher.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Use overflow hidden to clear the float and form a new bfc which will not be affected by the float height on the left. The height on the right is the height of the content in the ul. In addition, regarding the two-column adaptive layout, you can take a look at this demo
After looking at the demo, the root of the problem is that you added clearfix to ul, and the display of cleafix:before is set to table, so the height of ul is inaccurate. As for the principle, I need to check the information further.
I don’t know the reason. Usually when I encounter it, I add overflow: hidden;
. . . At first I thought it was really a BUG, so I was so excited to watch it, but finally found out it was a border issue. . .
For the first layout, the solution I can think of is: add overflow: auto; to the parent element p.right-content of the right content area to block the impact of floating on the left. The width of the container inside the right content area will not be set and will not be affected under normal circumstances.
PS: The current project style has been changed. The left side can use position:absolute; to meet the needs. Therefore, the left side has been modified to absolute positioning, so there is no floating. When the content on the right uses .cl, the content cannot be matched with float in one line, causing the height to become higher.