61-浮动元素贴靠现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>61-浮动元素贴靠现象</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        .box1{
            float: left;
            width: 50px;
            height: 300px;
            background-color: red;
        }
        .box2{
            float: left;
            width: 50px;
            height: 100px;
            background-color: green;
        }
        .box3{
            float: left;
            width: 250px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--
1.什么是浮动元素贴靠现象?
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
-->
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>
</html>


 

H5 61-浮动元素贴靠现象的更多相关文章

  1. H5 62-浮动元素字围现象

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

  2. HTML连载46-浮动元素字围现象、浮动练习

    一.浮动元素的字围现象 div{ float:left; width:100px; height:100px; background-color: red; border:1px solid blac ...

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

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

  4. CSS 教程 - 闭合浮动元素

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...

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

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

  6. HTML。CSS浮动元素详解

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

  7. css让浮动元素水平居中

    对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...

  8. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  9. CSS浮动元素的水平居中

    方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

随机推荐

  1. 后台调用前端JS

    ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script> ...

  2. 日志记录模块logging

    在python中,日志记录显示有两种方式,一种是保存在文件和打印屏幕上,一种保存在文件中. 第一种,直接保存在文件中. import logging #日志模块,方便记录日志 # 下面是配置日志记录格 ...

  3. KFCM算法的matlab程序

    KFCM算法的matlab程序 在“聚类——KFCM”这篇文章中已经介绍了KFCM算法,现在用matlab程序对iris数据库进行简单的实现,并求其准确度. 作者:凯鲁嘎吉 - 博客园 http:// ...

  4. 卸载安装node npm (Mac linux )

    1. 卸载node npm (1) 先卸载 npm: sudo npm uninstall npm -g (2) 然后卸载 Node.js. (2.1) 如果是 Ubuntu 系统并使用 apt-ge ...

  5. Maven中POM.XML详解

    转自https://blog.csdn.net/jariwsz/article/details/19554137 我们先看一个简单的例子: <project xmlns="http:/ ...

  6. nuxt拦截IE浏览器

    需求场景 判断浏览器类型,让譬如IE的低版本浏览器跳转到指定提示浏览器升级页面. 难点分析 使用过的都知道,nuxt没有暴露主入口页面也就是index.html啊,我们以前常用的IE条件判断没地方写. ...

  7. [JS]js中判断变量类型函数typeof的用法汇总[转]

    1.作用: typeof 运算符返回一个用来表示表达式的数据类型的字符串.  可能的字符串有:"number"."string"."boolean&q ...

  8. JavaScript的内置对象（Global对象）

    内置对象的定义 由 javaScript 实现提供的.不用自己创建,这些对象在 ECMAScript 程序执行之前就已经存在了. 意思就是说,开发人员不必显示地实例化内置对象:因为它们已经实例化了. ...

  9. C#多线程の遇见长耗时操作以及多任务（简明记要）

    4.0用         Task.Factory.StartNew(()=>{});4.0以下用  ThreadPool.QueueUserWorkItem(()=>{})4.0以上用 ...

  10. 使用Eclipse打jar包 包含依赖jar包

    1.在项目根目录新建MANIFEST.MF文件 //版本号 Manifest-Version: 1.0 //依赖jar包路径 多个用空格隔开 Class-Path: lib/commons-loggi ...