清除浮动（*）

作者：管理员

发布时间：2020/10/9 9:17:02

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=2698

• 盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，非自适应
• 父级元素设置高度
• 父级元素触发BFC（Float，Overflow: Hidden | Visible，Display: Flex | Grid）

<div class="parent" style="overflow:hidden">
    <div class="f"></div>
</div>

• 添加额外标签

<div class="parent">    //添加额外标签并且添加clear属性
    <div class="f"></div>
</div>
<div style="clear:both"></div>

• 建立伪类选择器清除浮动（推荐）

//添加:after伪元素
.parent:after{    content: ''; /* 设置添加子元素的内容是空 */      display: block; /* 设置添加子元素为块级元素 */           height: 0; /* 设置添加的子元素的高度0 */         visibility: hidden; /* 设置添加子元素看不见 */         clear: both; /* 设置clear：both */}<div class="parent">
    <div class="f"></div>
</div>

关键字：css