clear伪类使用
2024-10-18 21:23:30
都知道float会脱离文档流 用什么办法撑开父元素呢? 手动在本区块的所有float元素之后加上一个块元素并对其添加clear:both
可以 但是这样还要再去修改html页面 而且多了一个仅仅是为了控制布局却没有实际表现意义的元素 不好..
将float的父元素也设定为float 这样会导致更深的问题
将父元素设为overflow:hidden 很不错的办法 推荐! 但是我希望内部的元素能够超出 怎么弄呢?
用伪类!只需要修改css 就能向html中添加一个元素啦!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.root{
margin: 0 auto;
margin-top: 20px;
margin-bottom: 50px;
}
.pos{ }
.fl{
width: 300px;
height: 200px;
float: left;
background-color: lime;
}
.fl2{
background-color: black;
}
.pos:after{
/*这5个属性缺一不可*/
content: '.';
visibility: hidden;
clear: both;
display: block;
height: 0px; /*如果没有这个 容器会比float元素行多出一行字的高度*/ }
</style>
</head> <body>
<div class='root'>
<div class='pos'>
<div class='fl'></div>
<div class='fl fl2'></div>
</div>
</div>
</body>
</html>
最新文章
- Lucene.net应用
- 重新想象 Windows 8 Store Apps (36) - 通知: Tile 详解
- Docker简介
- Python3 学习第四弹:编码问题(转载)
- BYTE、WORD与DWORD类型
- struts2+ajax实现异步验证
- shell读取文件的每一行
- 分析业务模型-类图(Class Diagram)
- Mycat 分片规则详解--ASCII 取模范围分片
- weka的基本使用
- Java通过POI读取Excel
- rails中accepts_nested_attributes_for应用
- Vue.js组件遇到的那些坑
- Google Cast和ChromeCast
- 计算mysql 数据库 表大小 服务器传输 小写表明转成大写
- Zookeeper客户端对比选择_4
- 【安卓】imageView.scaleType取centerCrop后,再用padding时显示异常?
- smartconfig配置模式
- tomcat下发布项目,遇到的问题总结
- python内置方法补充bin