浮动:

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的更多相关文章

  1. 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_ ...

  2. 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 ...

  3. vector源码3(参考STL源码--侯捷):pop_back、erase、clear、insert

    vector源码1(参考STL源码--侯捷) vector源码2(参考STL源码--侯捷):空间分配.push_back vector源码(参考STL源码--侯捷)-----空间分配导致迭代器失效 v ...

  4. cin详解(get()、getline()、clear()、sync())

    简述 在C中,输入输出用scanf和printf,在输入数据的同时还需说明数据的类型,如果输入数据较多,那就很麻烦,而C++中也有相似的东西cin和cout,它们来自C++的一个名叫" io ...

  5. 清除浮动(overflow、clear、:after等方法)

    元素在浮动之后有三个重要的特点: 脱离文档流. 向左/向右浮动直到遇到父元素或者别的浮动元素. 浮动会导致父元素高度坍塌.  解决父元素高度坍塌的方式就是清除浮动. 以下述代码为例: <styl ...

  6. 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 ...

  7. =new、=null、.clear()、system.gc()的区别

    开发经验告诉我 = new是指向另一个地址空间 =null对象被回收 .clear()对象被清空,但是仍然指向原来的地址空间 这三种方式都并没有真正的清理内存 只有system.gc()是直接清理,但 ...

  8. 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC

    前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...

  9. HTML的三种布局:DIV+CSS、FLEX、GRID

    Div+css布局 也就是盒子模型,有W3C盒子模型,IE盒子模型.盒子模型由四部分组成margin.border.padding.content. 怎么区别这两种模型呢,区别在于w3c中的width ...

随机推荐

  1. 【第九章】 springboot + mybatis + 多数据源 (AOP实现)

    在第八章 springboot + mybatis + 多数据源代码的基础上,做两点修改 1.ShopDao package com.xxx.firstboot.dao; import org.spr ...

  2. [bzoj 1270][BeijingWc2008]雷涛的小猫

    Description 雷涛的小猫雷涛同学非常的有爱心,在他的宿舍里,养着一只因为受伤被救助的小猫(当然,这样的行为是违反学 生宿舍管理条例的).  在他的照顾下,小猫很快恢复了健康,并且愈发的活泼可 ...

  3. dubbo 实战总结

    1,出现重复调用.因为有重试机制,可以改为异步调用或者幂等操作.

  4. mysql中时间计算函数SQL DATE_SUB()用法

    本文为博主原创,未经允许不得转载: 在写sql的时候,经常要在sql中传值时间,对时间进行计算并过滤.之前都是将时间在后台计算好,直接传值给sql, 今天发现,有一个更方便的sql函数,可以简化很多代 ...

  5. PTA第一次作业

    5-5 #include <cstdio> #include <iostream> #include <cstdlib> using namespace std; ...

  6. HDU 6073 Matching In Multiplication(拓扑排序+思维)

    http://acm.hdu.edu.cn/showproblem.php?pid=6073 题意:有个二分图,左边和右边的顶点数相同,左边的顶点每个顶点度数为2.现在有个屌丝理解错了最佳完美匹配,它 ...

  7. UVa 10118 免费糖果(记忆化搜索+哈希)

    https://vjudge.net/problem/UVA-10118 题意: 桌上有4堆糖果,每堆有N颗.佳佳有一个最多可以装5颗糖的小篮子.他每次选择一堆糖果,把最顶上的一颗拿到篮子里.如果篮子 ...

  8. [IOS][sqlite][SQL][数据库]SQL基本语句大全

    参考:http://www.cnblogs.com/yubinfeng/archive/2010/11/02/1867386.html 一.基础 1.说明:创建数据库CREATE DATABASE d ...

  9. [html]点击button后画面被刷新原因:未设置type="button"

    一.问题原因解析: 在form表单里的button, type 属性未设置的情况下,Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C ...

  10. SqlServer使用表值函数汇总

    先谈谈需求,我们先创建一张表,脚本如下: create table Cost ( Id ,) primary key,--编号 CostTime date,--时间 Num int--销售额 ); ' ...