float、clear、overflow
浮动:
float: none|left|right
作用使得标签失去块级标签的独占一行效果,向某个方向靠拢
标签浮动了,也需要占地方,有时候出现未浮动的div覆盖部分浮动div是浏览器的bug情况
使用display属性在表面上看来也可以达到浮动的效果,但是width和height属性会失效
清除浮动
clear: none|left|right|both
clear表示的是你的需求,通过改变自己的位置达到。
clear=“left”的意思就是这个控件左边不允许出现浮动
如果左边出现浮动,无法改变浮动的控件,只能将自己往下移,避开,直到左边没有浮动的情况为止
例如img、input等行级标签也可以设置浮动,但是使用不浮动的空间无法clear属性无法达到清除浮动的效果。不是很理解这点。
如果在一个div中的所有的元素都经过浮动,那么该div的height和width属性会是失去效果。可以使用在控件中插入空的div,设置div的clear属性为all就可以了
溢出处理
overflow:
visiable:默认值。内容不会被修剪,会呈现在盒子之外
hidden:内容会被修剪,并且其余内容是不可见的
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容(当然内容默认是不会被修剪的,所以它的效果和visiable一样)
float、clear、overflow的更多相关文章
- deque源码4(deque元素操作:pop_back、pop_front、clear、erase、insert)
deque源码1(deque概述.deque中的控制器) deque源码2(deque迭代器.deque的数据结构) deque源码3(deque的构造与内存.ctor.push_back.push_ ...
- list源码3(参考STL源码--侯捷):push_front、push_back、erase、pop_front、pop_back、clear、remove、unique
list源码1(参考STL源码--侯捷):list节点.迭代器.数据结构 list源码2(参考STL源码--侯捷):constructor.push_back.insert list源码3(参考STL ...
- vector源码3(参考STL源码--侯捷):pop_back、erase、clear、insert
vector源码1(参考STL源码--侯捷) vector源码2(参考STL源码--侯捷):空间分配.push_back vector源码(参考STL源码--侯捷)-----空间分配导致迭代器失效 v ...
- cin详解(get()、getline()、clear()、sync())
简述 在C中,输入输出用scanf和printf,在输入数据的同时还需说明数据的类型,如果输入数据较多,那就很麻烦,而C++中也有相似的东西cin和cout,它们来自C++的一个名叫" io ...
- 清除浮动(overflow、clear、:after等方法)
元素在浮动之后有三个重要的特点: 脱离文档流. 向左/向右浮动直到遇到父元素或者别的浮动元素. 浮动会导致父元素高度坍塌. 解决父元素高度坍塌的方式就是清除浮动. 以下述代码为例: <styl ...
- Linux常用命令详解(第二章)(cat、more、less、head、tail、clear、poweroff、reboot、alias、unalias、uname、hostname、history、whitch、wc、w、who、whoami、)
本章命令(共18个): 1 2 3 4 5 6 7 8 9 10 cat more less head tail clear poweroff reboot alias unalias uname h ...
- =new、=null、.clear()、system.gc()的区别
开发经验告诉我 = new是指向另一个地址空间 =null对象被回收 .clear()对象被清空,但是仍然指向原来的地址空间 这三种方式都并没有真正的清理内存 只有system.gc()是直接清理,但 ...
- 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC
前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...
- HTML的三种布局:DIV+CSS、FLEX、GRID
Div+css布局 也就是盒子模型,有W3C盒子模型,IE盒子模型.盒子模型由四部分组成margin.border.padding.content. 怎么区别这两种模型呢,区别在于w3c中的width ...
随机推荐
- [BZOJ1196][HNOI2006]公路修建问题 二分答案+最小生成树
Description OI island是一个非常漂亮的岛屿,自开发以来,到这儿来旅游的人很多.然而,由于该岛屿刚刚开发不久,所以那 里的交通情况还是很糟糕.所以,OIER Association组 ...
- 03_Flume多节点Failover实践
1.实践场景 模拟上游Flume Agent在发送event时的故障切换 (failover) 1)初始:上游Agent向active的下游节点Collector1传递event 2)Collecto ...
- HDU 6092 Rikka with Subset(dp)
http://acm.hdu.edu.cn/showproblem.php?pid=6092 题意: 给出两个数组A和B,A数组一共可以有(1<<n)种不同的集合组合,B中则记录了每个数出 ...
- Cocos2d-x学习笔记(四) HelloWorld场景类
类定义原型如下: #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "cocos2d.h" ...
- windows 命令行中使用winrar
加入环境变量即可 我的电脑右键属性->高级->环境变量->系统变量->编辑 变量名:path 变量值:C:/Program Files/WinRAR; --变量值为WinRAR ...
- Python 以指定宽度格式化输出
当对一组数据输出的时候,我们有时需要输出以指定宽度,来使数据更清晰.这时我们可以用format来进行约束 mat = "{:20}\t{:28}\t{:32}" print(mat ...
- Ubuntu14.04(server amd 64)编译安装 ceres-solver
文档地址:http://www.ceres-solver.org/installation.html git地址:(需要FQ下载) git clone https://ceres-solver.goo ...
- Selenium UI 举例 getCssValue
selenium jar包中,在WebElement的接口中, String getCssValue(String var1); 可以通过标签,获取对应的css值.具体要怎么用呢,如下: WebEle ...
- Qt5.3.2_Oracle驱动
参考网址:http://blog.csdn.net/sdqyhn/article/details/39855847 ZC: 将编译好的 qsqloci.dll和qsqlocid.dll 放到 目录“E ...
- 【Golang 接口自动化02】使用标准库net/http发送Post请求
写在前面 上一篇我们介绍了使用 net/http 发送get请求,因为考虑到篇幅问题,把Post单独拎了出来,我们在这一篇一起从源码来了解一下Golang的Post请求. 发送Post请求 net/h ...