<!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. JavaScript or JQuery 获取服务器时间

    用js做时间校正,获取本机时间,是存在bug的. 使用js也可获取到服务器时间,原理是使用 ajax请求,返回的头部信息就含有服务器端的时间信息,获取到就可以了(有的IE下扔不会正常获取,还是更建议走 ...

  2. Docker: dockerfile常用关键字

    Dockerfile指令 Dockfile执行和shell命令一行,一行一行执行- 写Dockerfile注意点: 1．           尽量少RUN 2．           多个命令拼接在一起 ...

  3. JavaScript数据类型之数字类型

    引言 JavaScript不区分整数值和浮点数值,全部使用浮点数值表示.当一个数字直接出现在JavaScript程序中,我们称之为数字直接量(numeric litertal).JavaScript支 ...

  4. Spring的AOP基于AspectJ的注解方式开发1

    参考自黑马培训机构 创建项目,引入jar包 编写目标类,切面类并完成配置 package spring.day2_aop2; /* * 编写目标类 */ public class OrderDao { ...

  5. A - Subarrays Beauty gym 位运算 &

    You are given an array a consisting of n integers. A subarray (l, r) from array a is defined as non- ...

  6. Django-rest-framework 接口实现 权限:(Permission)

    权限:(Permission) rest_framework 中 已经定义好了 权限 在 from rest_framework.permissions 中查看所有的权限 from rest_fram ...

  7. SQL FULL JOIN 关键字

    SQL FULL JOIN 关键字 只要其中某个表存在匹配,FULL JOIN 关键字就会返回行. FULL JOIN 关键字语法 SELECT column_name(s) FROM table_n ...

  8. android与c#之间scoket获取数据进行赋值显示的问题

    Android端发送的信息为:“手机号码,低压,高压,心率”. 需要实时的将接收到的信息显示到“数据栏”中,但是在执行监听任务的时候,启用了一个主线程,在接收数据的时候直接将数值复制给文本框会出现错误 ...

  9. [转自机器之心] 刚入校门的PhD们还可以抢救一下(读研读博指南)

    本文作者 Lucy A. Taylor 最近博士毕业,取得了牛津大学跨学科生物科学博士学位. 读博是件难事,一路上可能会遇到很多挫折.失败.崩溃时刻.Lucy 多么希望在开始读博时就能收到一些有益的建 ...

  10. BZOJ5197:[CERC2017]Gambling Guide(最短路,期望DP)

    Description 给定一张n个点,m条双向边的无向图. 你要从1号点走到n号点.当你位于x点时,你需要花1元钱,等概率随机地买到与x相邻的一个点的票,只有通过票才能走到其它点. 每当完成一次交易 ...