其实，两种情况中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. iOS 手势识别器概述

    手势识别器 iOS 手势识别器(UIGestureRecognizer) 点击手势(UITapGestureRecognizer) 滑动手势(UISwipeGestureRecognizer) 旋转手 ...

  2. iOS开发 之 不要告诉我你真的懂isEqual与hash!

    目录 为什么要有isEqual方法? 如何重写自己的isEqual方法? 为什么要有hash方法? hash方法什么时候被调用? hash方法与判等的关系? 如何重写自己的hash方法? 为什么要有i ...

  3. Oracle11g数据库导入Oracle10g数据库操作笔记

    一.在11g服务器上,使用expdp命令备份数据 EXPDP USERID='SYS/sys@daggis as sysdba' schemas=oa directory=DATA_PUMP_DIR ...

  4. 记一次mysql性能优化过程

    摘要: 所谓mysql的优化,三分是配置的优化,七分是sql语句的优化,通过一些案例分析,希望给大家在工作中带来一些思路 由于配置是运行过那么长时间,很稳定,基本上不考虑,所以本次主要是sql的优化, ...

  5. 优动漫PAINT-牵牛花画法教程

    喇叭型对画者自身的塑形功力会有较高的要求,作者很靠谱的把他的塑形方式详细呈现了出来~ 对于这样的一个仿真效果的牵牛花完全可以使用优动漫PAINT完成,简单又快捷,软件下载:http://www.don ...

  6. FCC编程题之中级算法篇（上）

    介绍 FCC: 全称为freeCodeCamp,是一个非盈利性的.面向全世界的编程练习网站.这次的算法题来源于FCC的中级算法题. FCC中级算法篇共分为(上).(中).(下)三篇.每篇各介绍7道算法 ...

  7. mysql和mongodb的区别

    1.mongodb的概括 MongoDB(文档型数据库):提供可扩展的高性能数据存储 2.mongodb的功能概括 (1)基于分布式文件存储 (2)高负载情况下添加更多节点,可以保证服务器性能 (3) ...

  8. NOIp2018模拟赛四十四

    加量不加价?! 昨晚看时间变成了3.5h以为终于变成了正常难度,结果还是国家集训队作业... A题看起来很神仙,B题看上去很神仙,C题一看就知道很神仙: 结果发现B是假题,放榜后发现A也是假题,C是Y ...

  9. 洛谷2055 [ZJOI2009]假期的宿舍

    题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如 A 和 B 都是学校的学生,A 要回家,而 C 来看B,C 与 A 不认识. ...

  10. [HDU5685]2016"百度之星" - 资格赛 Problem A

    题目大意:给你一个字符串,和一些问题,每个问题问你[l,r]子串的哈希值是多少. 哈希值计算方法为:$H(s)=\prod _{i=1} ^{i\leq len(s)}(s_i-28)(mod\ 99 ...