float浮动与清除浮动
2024-10-12 06:47:51
浮动:
浮动的框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止。文档的普通流中的块框会当浮动框不存在一样。但会影响内联框(通常是文本)的排列。
属性值有:left,right,none;
当浮动元素的父元素没有其他元素内容的时候,父元素会出现“勾搭塌陷”的情况,浮动元素脱离了父元素。为了避免这种情况,需要清除浮动。
清除浮动:
方法一:
clear:both;
在需要清除浮动的地方都加上这句话可以达到目标,兼容性好。但会增加重复代码。
方法二:
使用overflow:hidder; 或则zoom:1;
浮动元素会回到容器里面。
方法三:
:afte伪元素
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素清楚浮动。
可完美兼容各主流浏览器。
.box{
backgroudn:green;
border:1px solid red;
}
.box img{
float:left;
}
.box p{
float:right;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
zoom:1;//触发hasLayout,兼容IE6和IE7
}
<div class="box">
<img src="">
<p>text</p>
</div>
用伪元素方法更合适一点。
注:不清除浮动,容器是不能被撑开的,浮动元素脱离在外面,容器的背景,内外边距都无效。
最新文章
- phpstorm 设置Utf8编码
- CE 消息处理
- android studio logcat 换行(日志换行)
- python 读取全国城市aqi数据,差值生成png图片
- 彻底解决_OBJC_CLASS_$_某文件名";, referenced from:问题转
- CKeditor 配置使用
- html 5 drag and drop upload file
- Red5 1.0.5安装过程记录
- 将文件的图标添加到LISTVIEW中
- 第02讲- Android开发环境
- Mybatis的失误填坑-java.lang.Integer cannot be cast to java.lang.String
- Redis sentinel &; cluster 原理分析
- 来自学长&;师兄们的应届校招经验
- LSH(Locality Sensitive Hashing)原理与实现
- 《A Structured Self-Attentive Sentence Embedding》(注意力机制)
- 动态规划之132 Palindrome Partitioning II
- 20170921xlVBA_SQL蒸发循环查询2
- new和delete重载
- [UE4]场景截图
- 拿pyg 的fastdfs分布式文件系统 存储的位置