自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

clearfix的清浮动的技巧

作者:灰牛站长•发布时间:2021-07-12 11:13:57•浏览

clearfix清浮动效果图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left,.right{
width: 200px;
height: 200px;
float: left;
}
.left{
background-color: brown;
}
.right{
background-color: cornflowerblue;
}
.header,.footer{
border: 10px solid red;
}
.header:after{
/*
利用伪元素:after清除浮动必备的条件,缺一不可
1.块级元素
2.clear:both
3.content:""
*/
display: block;/*确保元素是一个块级元素*/
clear: both;/*不允许左右两边有浮动对象*/
content: "";/*这是伪元素:before和:after天生自带的属性,如果不写,伪元素不起作用*/

/*写全的样式属性*/
height: 0;/*防止在低版本浏览器中height:1px的情况,我们用height:0去覆盖*/
font-size: 0;/*字体大小*/
overflow: hidden;/*溢出隐藏*/
visibility: hidden;/*让所有可见性的元素隐藏*/
}

/*
共有class名
利用伪元素after清浮动的固定代码,只要清浮动,我们在浮动元素的父元素上加一个cleafix即可;
*/

.clearfix:after{
display: block;
clear: both;
content: "";
height: 0;
font-size: 0;
overflow: hidden;
visibility: hidden;
}
/*
思考题
overflow:hidden和visibility: hidden;有什么区别呢?
*/
</style>
</head>
<body>
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

相关文章

  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • z-index的特点

    z-index的特点

    思路: ➥z-index的结构/定位元素默认的z-index ➥z-index单位 ➥能不能用子元素和父元素比较 ➥父元素没有z-index,能不能通过子元素控制他们的层级=改变层级...
    2021-07-12 11.07.57
  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38
  • 定位之绝对定位

    定位之绝对定位

    定位元素元素层级元素定位滚动条 绝对定位- position: absolute;特点 脱离文档流 可以设置参照物,参照物必须是其父级元素(直系父级),如果直接父级没有会一直...
    2021-07-12 11.07.13

手机端