html中页面布局—浮动
folat:浮动 none:不浮动,默认 left:向左浮动 right:向右浮动 auto:根据自身所占位置,自动居中 1)、自身必须有宽高 2)、inline-block或folat都会使auto失效 3)、需要填写具体值来调整元素位置 浮动产生的影响: 1)、自身的父元素无法获取宽高 2)、后续的元素会自动补位 3)、浮动会脱离当前文档流,覆盖标准流的元素 4)、auto会失效 5)、块元素可以横排显示(失去独占一行的特性) 6)、行元素可以设置宽和高 7)、除了auto以外,依然支持margin 8)、提升了半个层级z-index(后续会讲到) 使用浮动布局,那么一定要清除浮动,否则会很严重!!!页面会爆炸!! 清除浮动的常见方法有以下几种: 1)、给父级设置宽高 缺点:父级如果作为容器,直接写死了,后续元素添加会出现问题,而且无法解决元素重叠的问题 2)、使用overflow:hidden属性(超出内容区域的部分,隐藏)给父元素添加 缺点:如果内容需要超出,或者较多时,需求发生冲突;如果内容没有超出,推荐使用,较为方便 使用场景:浮动元素较少时 <div id="main" style="overflow: hidden;"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div