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 ...
随机推荐
- 【附7】turbine
一.作用 聚集同一个微服务的相同的commandKey.Threadpool.commandGroupKey数据进行聚合 二.配置 1.集群(cluster)(turbine聚集数据的粒度) turb ...
- 第八章 对称加密算法--AES
注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第7章“初等加密算法--对称加密算法” 8.1.AES 特点: 密钥建立时间短.灵敏性好.内存需求低(不管怎样,反正就是好) ...
- 51nod 1070 Bash游戏 V4
这种博弈题 都是打表找规律 可我连怎么打表都不会 这个是凑任务的吧....以后等脑子好些了 再琢磨吧 就是斐波那契数列中的数 是必败态 #include<bits/stdc++.h> u ...
- Unity 之 Vector3
class Variables one 指向(0,0,0) zero 指向(1,1,1) right指向 x轴的方向 Up 指向 y轴的方向 forward 指向 z轴的方向
- axis2框架用wsdl文件生成的服务端MessageReceiveInOut文件注意事项
在用axis2生成服务端文件和客户端文件,当客户端文件调用服务端文件时,都是通过wsdl文件生成的 配置文件进行相互的调用. 在一开始做开发测试的时候,通过soapUI进行调用接口的时候,可以调用成功 ...
- 在Windows上面使用QT5 (without QTcreator or VS 2017)
在Windows上面使用QT5 (without QTcreator or VS 2017) 本文环境: 最新版 QT 5.12.1 Windows 10 64位 仅考虑动态链接,静态链接不在本文讨论 ...
- Ubuntu下配置JDK
1. 首先你需要到oracle官网下载最新版本的JDK.跑到oracle官网,自己到Download下面找找吧 2.转到下载路径,对下载后的文件解压缩,比如我下载的文件名为jdk-7u7-linux- ...
- 新开发项目Jacoco代码覆盖率
一般只有新的项目才会去用JaCoCo工具看一下代码覆盖率, 一来看看测试有没有漏的测试用例 二来看看开发有没有留下冗余的代码 新开发项目Jacoco代码覆盖率后端接口打成jar包,进行启动 #exec ...
- 深入理解Hadoop之HDFS架构
Hadoop分布式文件系统(HDFS)是一种分布式文件系统.它与现有的分布式文件系统有许多相似之处.但是,与其他分布式文件系统的差异是值得我们注意的: HDFS具有高度容错能力,旨在部署在低成本硬件上 ...
- Codeforces 918C - The Monster
918C - The Monster 思路1: 右键在新窗口打开图片 代码: #include<bits/stdc++.h> using namespace std; #define ll ...