其实，两种情况中box2的内容都是围绕着浮动元素box1来的。

因为：浮动元素会覆盖块元素，但块元素里的内容（内联盒）不会被覆盖，而是围绕着浮动盒。

将box1的背景色去掉，真相就大白了：

此时发现，box2确实是被box1所覆盖了，但是box2的内容并没有被覆盖，而是围绕着box2。

重温前端基础之-css浮动之怪异现象的更多相关文章

  1. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  2. 前端基础之CSS(浮动-解决溢出-实现个人头像框)

    目录 一:浮动float 1.什么是浮动? 2.浮动的作用 3.浮动有两个特点 4.float格式 二:代码实现左右浮动边框 三:浮动造成父标签塌陷问题(清除浮动) 1.浮动会造成父标签的影响 三:清 ...

  3. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  4. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  5. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  6. Web前端基础(4):CSS(一)

    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  7. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)

    品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...

  8. 前端基础之---css

    css  介绍 css 规则有两个主要的部分构成 : 选择器  , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层 ...

  9. Web前端基础(5):CSS(二)

    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

随机推荐

  1. PostgreSQL hstore 列性能提升一例

    PostgreSQL 支持hstore 来存放KEY->VALUE这类数据, 事实上也相似于ARRAY或者JSON类型.  要高效的使用这类数据,当然离不开高效的索引.我们今天就来看看两类不同的 ...

  2. webserver的作用！

    常见的webserver:Apache和Nginx(linux平台) IIS(window平台) 非常多小公司小项目眼下不一定使用了webserver,由于流量下,单台应用server能够支撑. 实际 ...

  3. Hibernate的多种关系映射（oto、otm、mtm）

    前提:使用注解映射 一.一对一(夫妻关系表) 两个表:hus1和wife1表,外键为id,各自有名字hname和wname 映射得到两个类:Hus1和Wife1类 Hus1类(主表): package ...

  4. 一个人的旅行 HDU杭电2066【dijkstra算法 || SPFA】

    pid=2066">http://acm.hdu.edu.cn/showproblem.php? pid=2066 Problem Description 尽管草儿是个路痴(就是在杭电 ...

  5. [codeforces 894 E] Ralph and Mushrooms 解题报告 （SCC+拓扑排序+DP）

    题目链接:http://codeforces.com/problemset/problem/894/E 题目大意: $n$个点$m$条边的有向图,每条边有一个权值,可以重复走. 第$i$次走过某条边权 ...

  6. 大量文件时使用ls

    有时一个目录下的文件实在太多, ls的时候就卡住了. 其实, 如果不加排序的话, 就可以迅速的显示文件. ls -f 解释: -f do not sort, enable -aU, disable - ...

  7. BootStrap学习(一)——BootStrap入门

    1.环境搭建 中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下: 完成后,WEB项目 ...

  8. 给DOM操作生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  9. 转载：跟我一起写 Makefile

    陈皓(http://my.csdn.net/haoel) 概述 —— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得 ...

  10. h5实现 微信的授权登录

    本文重点 判断是不是微信环境 localstorage设置一个值 微信授权登录 获取一个时间戳 new Date().getTime() const wx = (function () { retur ...