侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

css清除浮动方法 –

2022-06-01 星期三 / 0 评论 / 0 点赞 / 169 阅读 / 1739 字

浮动的产生会带来哪些问题,大家看一下例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF…

浮动的产生会带来哪些问题,大家看一下例子

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .diva,.divb{            width: 300px;            height: 300px;            border: 3px solid red;            float: left;        }    </style></head><body>    <div>        <div class="diva">diva</div>        <div class="divb">divb</div>    </div></body></html>

二个子div左浮动脱离了文档流,导致父div塌陷,我们可以定义一个clear:both样式,然后在子div的末尾加上一个div引用clear:both样式,不过这样html结构代码量就会增多,大家可以了解一下这种清楚浮动的方法,但是久伴不推荐使用这种方案,大家可以使用:after 伪元素来清楚浮动,代码如下

.clearfix:after {  content: "/00A0";  display: block;  visibility: hidden;  width: 0;  height: 0;  clear: both;  font-size: 0;  line-height: 0;  overflow: hidden;}.clearfix {  zoom: 1;}

以上代码请在浮动的父元素上面引用即可

广告 广告

评论区