html+css学习笔记008-浮动0清除浮动

Mr. 柳上原

发布于 2018-09-05 15:12:16

1.6K0

发布于 2018-09-05 15:12:16

文章被收录于专栏：菜鸟前端工程师

Author：Mr.柳上原

付出不亚于任何的努力
愿我们所有的努力，都不会被生活辜负
不忘初心，方得始终

我是一个很皮的人

明知道不好的事

做了会有坏处的事

非要去皮一下

快三十的人

却总是管不住自己的皮性

无数次的皮

无数次的让别人帮我收尾

无数次的继续皮

为何总是不会三思而后行

<!DOCTYPE html> <!-- 文档类型：标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字：英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

float:left; /* 浮动：left左 right右 */

clear:left; /* 清除浮动：left左 right右 both全部 */

/* 清除浮动方法：
1.增加空的块级标签
<div>
<div>1</div>
<div>2</div>
<p></p>
</div>
2.给父级加个高度
ul{
height:100px;
}
3.给父级display:inline-block <margin:auto会失效>
ul{
display:inline-block;
}
4.给父级overflow:auto <ie6需要给父级宽度>
ul{
overflow:auto;
}
5.after伪类清除
ul::after{
content:' ';
display:block;
clear:both;
}

类名批量浮动与清除：
.clearfix::after{
content:' ';
display:block;
clear:both;
}
.fl{
float:left;
}
.fr{
float:right;
}

 */

</style>

</head>

<body> <!-- 网页主干：可视化区域 -->

<div id='wrap' class='wrap'>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.05.24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html