css实例,css网页的几种布局实例

css实例,css网页的几种布局实例详细介绍

.left{ float: left; width: 100%; height: 200px; background-color: red; } .left-content{ margin-left: 30%; } .right{ float: left; width: 30%; margin-left: -100%; height: 200px; background-color: green; } .layout0{ clear: both; width: 100px; height: 100px; background-color: yellow; }

设置子元素的margin,然后父元素必须浮动。 用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。

-margin必须大于或等于自身的宽度才会上移