float
2016-04-05 12:22
148 查看
浮动的概念
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的例子
![](http://img.blog.csdn.net/20160405121800774)
3.清除浮动的办法
给父容器设置overflow: hidden
父元素也设置浮动
在浮动元素末尾添加一个空的标签例如
给父元素添加clearfix类
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .div1 { width: 100px; height: 100px; background-color: red; float: left; } .div2 { width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div class="container"> <div class="div1"></div> <div class="div2"></div> 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。 因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。 </div> </body> </html>
3.清除浮动的办法
给父容器设置overflow: hidden
父元素也设置浮动
在浮动元素末尾添加一个空的标签例如
<div style=”clear:both”></div>
给父元素添加clearfix类
相关文章推荐
- PCA算法实现
- 局部敏感哈希-Locality Sensitive Hashing
- FaceNet--Google的人脸识别
- 理解dropout
- Learning to Rank简介
- 二值神经网络(Binary Neural Network,BNN)
- OpenGL ES——简述
- [iOS]Runtime
- IOS开发Swift用NSURLSessionDownloadTask实现后台下载
- CUDA(六). 从并行排序方法理解并行化思维——冒泡、归并、双调排序的GPU实现
- ubuntu更新mongodb
- 解决eclipse闪退
- URL之 URL的语法
- CUDA 7.5 & cuDNN v4 & tensorflow on Ubuntu 14.04 LTS
- FAST特征点检测features2D
- CUDA系列学习(五)GPU基础算法: Reduce, Scan, Histogram
- 贝塞尔曲线 & CAShapeLayer & Stroke 动画 浅谈
- 03构建之法阅读笔记之三
- Java eclipse生成doc文档
- 查看存储过程被引用