兼容性较好的3种方法
方法一:float+overflow
实现:左边浮动+固定宽度,右边overflow:hidden
即可,注意,右边不要设置width:100%
。由于设置overflow:hidden
并不会触发IE6-浏览器的haslayout
属性,所以若要兼容IE6需要设置zoom:1
。
原理:overflow:hidden
会触发BFC
,BFC
不会浮动元素重叠,因此会重新计算宽度。
<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; background: #F6D3FF; height: 200px; margin-right: 10px;}
.content { overflow: hidden; zoom: 1; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
<aside class="aside">左侧浮动,宽度固定300px</aside>
<article class="content">右侧overflow:hidden</article>
</section>
方法二:float+padding
其实这是最容易想到的方法,实现:左边浮动+固定宽度,右边设置一个padding-left
,然后再在里面套一个div即可,缺点是需要多一层结构。
<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; background: #F6D3FF; height: 200px;}
.content-wrapper {padding-left: 310px;}
.content { background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
<aside class="aside">左侧浮动,宽度固定300px</aside>
<div class="content-wrapper">
<article class="content">padding-left:310px</article>
</div>
</section>
方法三:float+负margin
实现:左右都浮动,左侧宽度固定,右侧100%,同时设置一个负的margin-left
来保证在同一行,再在子div设置一个正的margin-left
。
<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; background: #F6D3FF; height: 200px;}
.content-wrapper {float: left; margin-left: -300px; width:100%;}
.content {margin-left: 310px; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
<aside class="aside">左侧浮动,宽度固定300px</aside>
<div class="content-wrapper">
<article class="content">右侧浮动,宽度100%,同时外层margin-left: -300px;,内层margin-left: 310px;</article>
</div>
</section>
方法四:table
使用table布局的缺点是元素被设置为table后,内容撑开宽度,所以需要设置width:100%
。由于table-cell元素无法设置margin,若需要在元素间设置间距,需要增加结构。
<style>
.container{display:table; width: 100%;}
.aside {display:table-cell; width: 300px; background: #F6D3FF; height: 200px;}
.content-wrapper{display:table-cell;}
.content {margin-left: 10px; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
<aside class="aside">display:table-cell;,宽度固定300px</aside>
<div class="content-wrapper">
<article class="content">display:table-cell;</article>
</div>
</section>
兼容现代浏览器的方法
方法五:float+calc
2边都浮动,右侧宽度采用calc
来计算,只兼容现代浏览器。
<style>
.clear-float:after {content: ''; display: block; clear: both;}
.aside {float: left; width: 300px; margin-right: 10px; background: #F6D3FF; height: 200px;}
.content {float: left; width: calc(100% - 310px); background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
<aside class="aside">左侧浮动,宽度固定300px</aside>
<article class="content">右侧浮动,宽度 calc(100% - 310px)</article>
</section>
方法六:flex
<style>
.container{display: flex;}
.aside {width: 300px; margin-right: 10px; background: #F6D3FF; height: 200px;}
.content {flex: 1; background: #FFD5B1; height: 200px;}
</style>
<section class="container clear-float">
<aside class="aside">左侧宽度固定300px</aside>
<article class="content">父容器设置display:flex,右侧flex:1</article>
</section>
结尾
还有其它一些方法,比如inline-block
、grid
等,个人觉得掌握以上方法足够了,所以这里不讲。