左侧浮动或者绝对定位,右侧通过margin撑开
使用flex
使用<div>包含,然后靠margin形成bfc(百科:block formatting context块级格式化上下文
bfc是一个独立的渲染区域,只有block-level box参与,他规定了包括内部的block-level box如何布局,并且与这个区域外部毫不相干。
bfc就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也是如此,包括浮动和外边距合并等等,有了这些特性我们布局的时候就不会出现意外了情况了。
- 哪些情况下会产生bfc
display属性为block,list-item,table的元素,会产生bfc。(最常用的就是块级元素)
- 什么情况下会触发bfc
设置了float属性,并且不为none
position属性为absolute或者fixed
display为inline-block,table-cell,table-caption,flex,inline-flex
overflow属性不为visible
)
来源:https://www.cnblogs.com/1998Archer/p/12373508.html