<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>59-浮动元素的脱标</title>

    <style>

        .box1{

            float: left;

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .box2{

            width: 150px;

            height: 150px;

            background-color: blue;

        }

    </style>

</head>

<body>

<!--

1.什么是浮动元素的脱标?

脱标: 脱离标准流

当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

2.浮动元素脱标之后会有什么影响?

如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

-->

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

H5 59-浮动元素的脱标的更多相关文章

  1. CSS---文档流布局 | 脱标-postion-zindex | 脱标-浮动

    一.css文档流布局概念 1.1,什么是标准文档流 1.2,标准文档流下有哪些微观现象 二.CSS---position属性 2.1,position:relative 2.2,position:fi ...

  2. HTML连载45-浮动元素脱标、排序规则、贴靠现象

    一.浮动元素脱标 1.什么是浮动元素脱标 脱标:脱离标准流. 当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响 如果前面一个元素浮动了,而后面的一个元 ...

  3. CSS 规避脱标之两种用法

    大家好,我是小强老师,今天讲解一小点知识哈 对比了才知道什么好 看不出,很漂亮吧! 有木有倾国倾城的美色. 呵呵,好多东西也是这样的,好的东西只有对比了才觉得好. 我们知道我们网页布局 有三模式.   ...

  4. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  5. 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

    1  复习昨天知识 1.1 浮动  特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素   作 ...

  6. CSS——规避脱标流和vertical-align

    规避脱标流: 1.尽量使用标准流. 2.标准流解决不了的使用浮动. 3.浮动解决不了的使用定位. 问题解决:嵌套盒子在不使用定位的情况下定位到右上角 <!DOCTYPE html> < ...

  7. 关于BFC不会被浮动元素遮盖的一些解释

    简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...

  8. HTML。CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

  9. 使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响

    为元素设置“float”样式之后,元素会脱离标准文档流,不再占据原来的空间.后续元素会向前移动,占据这个新的空间.后续的文本会围绕着浮动元素分布,形成一种环绕布局的现象. 示例代码: <!DOC ...

随机推荐

  1. Weblogic java生成wlfullclient.jar

    进入weblogic的server\lib目录 cd G:\Oracle\Middleware\wlserver_10.3\server\lib 运行 java -jar G:\Oracle\Midd ...

  2. SpringBoot自定义属性配置以及@ConfigurationProperties注解与@Value注解区别

    我们可以在application.properties中配置自定义的属性值,为了获取这些值,我们可以使用spring提供的@value注解,还可以使用springboot提供的@Configurati ...

  3. adb连接手机模拟器

    首先,要保证模拟器和电脑在同一网段(手机模拟器设置为桥接模式即可) 我使用的是夜神模拟器. 然后查看一下adb版本, adb version 需要1.0.31往上的版本才能连接. 然后输入 adb c ...

  4. LeetCode算法题-Guess Number Higher or Lower（Java实现）

    这是悦乐书的第211次更新,第224篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第79题(顺位题号是374).我们正在玩数字游戏. 游戏如下:我从1到n中选择一个数字. ...

  5. intellij IDEA导入java源码

    第一步: 从安装的jdk目录中找到src.zip文件, 这里是java源码的压缩包 第二步: 打开IDEA, 随便一个java相关项目,打开右上角的project structure 第三步: 点开源 ...

  6. Android Studio教程03-Activtiy生命周期的理解

    目录 1. Activity 1.1. 安卓中的Activity定义和特性: 1.2. 注册Activity 1. Intent filters:设置默认开启的activity 1.3. Activi ...

  7. Day 1 For Knowledge Management

    Hi, There: This is my first day to use CNblogs as my personal knowledge management on internet. I wa ...

  8. html 标签学习(续)

    一.基础标签补充 1.div 标签和span标签 (没有特别的样式,常用) div标签用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现. span标签用来定义内联(行内)元素 ...

  9. [1] YOLO 图像检测 及训练

    YOLO(You only look once)是流行的目标检测模型之一, 原版 Darknet 使用纯 C 编写,不需要安装额外的依赖包,直接编译即可. CPU环境搭建 (ubuntu 18.04) ...

  10. 【css】3d导航效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...