Firefox outer frame Div background width color follows inside box Div adaptive

I have never understoodOverflow: hiddenWhat role does it play. Today, I suddenly found out that it is a good way to adjust browser compatibility. If the DIV nested outside is not given its height, it cannot automatically adapt to the DIV height in Firefox, it doesn't matter if you don't give the border color of the big Div, but if you give the border a width and color, what is displayed under Firefox is almost overlapped. All there is a way to add an attribute to the big Div, such as overflow: hidden. In this way, the self-adaptation of the following div is realized under Firefox. I have tested both IE, safail, Firefox and chrome. Below isCode, You can save the test. The big Div outside is warp.

<Style>
. Warp {margin: auto; width: 800px; Border: #000 solid 1px; overflow: hidden}
. Left_box {float: Left; width: 30%; Height: 600px; border-Right: # ff0 dashed 1px ;}
. Right_box {float: Right; width: 60%; Height: 600px; border-left: # f00 dashed 1px}
</Style>

. Mainxw {
Height: 100%;
Width: 830px;
Font-size: 12px;
Color: #000000;
Background-color: # ffffff;
Overflow: hidden;
}