<!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. c# .Net随机生成字符串代码

    /// <summary> /// 随机生成字符串 /// </summary> /// <param name="OperationType"> ...

  2. Sql Server 按格式输出日期

    SELECT dbo.fn_Data(getdate(),'yyyymmdd') CREATE FUNCTION [dbo].[fn_Data] (@date as datetime, @format ...

  3. Android WebSocket开发

    一,在模块build.gradle中添加webSocket的依赖包 //WebSocket 依赖包 implementation 'com.neovisionaries:nv-websocket-cl ...

  4. c/c++ 数组 数组的引用，指针数组的引用

    c/c++ 数组 知识点 1,数组的声明和初始化,对应代码里的test1和test2 2,char数组,对应代码里的test3 3,数组不可以拷贝和复制,对应代码里的test4 4,指针数组, 数组的 ...

  5. 我的游戏学习日志3——三国志GBA

    我的游戏学习日志3——三国志GBA 三国志GBA由日本光荣公司1991~1995所推出<三国志>系列游戏,该作是光荣在GBA上推出的<三国志>系列作品的第一款.本游戏登场武将总 ...

  6. #010 全年级C语言开始统一刷题了，能否坚持下去？

    不知道这是咋回事吧,这个系统挺不好使得,出现了一个又一个的问题. 使用过程中做题的那个系统自己就崩了,刷新后那道题得了零分. 前面的几道题难度系数也不小,对于我这个新手来说,但是这个系统太坑了.他明码 ...

  7. 【English】20190307

    appropriate for 适用[əˈpropriɪt fɔr] appropriate for many business applications:

  8. ES5-ES6-ES7_数组的扩展

    Array.prototype.indexOf(value)  得到值在数组中的第一个下标,如果元素不存在返回-1,可以用来判断是否包含指定的元素 var arr = [6,5,4,3,1,7,6]; ...

  9. Django-rest-framework 接口实现 rest_framework 中有已经定义好的 工具类 mixins generics viewsets

    rest_framework.mixins 请求业务 的 5 种实现 ​ mixin(混合类):不能单独使用,和其它类搭配起来使用(利用了Python支持多继承) rest_framework.mix ...

  10. centos 防火墙的操作

    systemctl start firewalld systemctl restart firewalld systemctl status firewalld systemctl enable fi ...