CSS implementation prevents page layout from being damaged by large images and long strings

When using TABLE and DIV for page layout design, the size defined in the layout will be damaged in case of large images and long English strings, resulting in page layout deformation.
Is there a solution?
The OVERFLOW: hidden attribute of CSS can be used to control the excess part, which is automatically hidden. The poor result is that the information displayed is incomplete. For example, only a part of the image is displayed. however, the page layout will not be messy.
When using overflow, you must define the width, percentage, or specific value.
When using DIV for page layout, you can define it on the large layout, such as in the left column, right column, and middle column, or for a specific layout element on the page.
This can also be used when ul and li are used to arrange the image list, so as to avoid the layout of some large-sized images and solve the problem of narrowing the browser window, an error occurred while the li element is automatically going back to the row arrangement.
BTW: use overflow: auto to simulate the IFRAME effect on the page and write it back.
Overflow: hidden not used <br/>

The code is as follows:	Copy code
<Div style = "width: 200px; background: green; color: # fff; padding: 8px"> Here is an image with a width greater than 200px! <Br/> </Div> <Br/> Overflow: hidden is used. <br/> <Div style = "overflow: hidden; width: 200px; background: green; color: # fff; padding: 8px"> The same picture is shown here to compare the effect! <Br/> </Div>