前言:
首先我们要清楚 为什么要清除浮动?
清除浮动主要为了解决父元素因为子元素浮动引起内部高度为0的问题 //清除浮动的本质
首先浮动就是脱离标准文档流,不占据原来的位置;标准文档里是默认的,从上下到左右
浮动的元素以及特点:
1.脱离标准文档流,不占据原来的位置
2.无论是块元素还是行元素,都可以水平排列,还可以设置宽和高(具有行内块特点)
3.找最近的父元素对齐,不超出内边距的范围
清除浮动的方法(最常用的4种)
1.加高法 2.额外标签法 3.溢出法 4.:after双伪元素清除浮动 单伪元素清除浮动
1.额外标签法: 给谁清除浮动,就在某个元素后面添加一个空白的空标签
优点: 通俗易懂,书写方便但是不推荐使用
缺点: 添加许多无意义的标签,让结构复杂化
用法:我们给small清除浮动(在small后面添加一个空白的标签clear 类名可以随意写),然后设置clear:both;
代码展示:
<div>
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签</div>
</div>
<style>
.clear{
clear:both;