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. SQL Server Alert发送告警邮件少了的原因

    最近突然发现我们部署在数据库上面的告警(Alert),当错误日志里面出现错误时,并不是每个错误日志都会发送邮件出来.如下所示,设置了告警"SQL Server Severity Event ...

  2. IPerf——网络测试工具介绍与源码解析（5）

    本篇随笔讲述一下TCP协议下,双向测试模式和交易测试模式下客户端和服务端执行的情况: 双向测试模式: 官方文档的解释 Run Iperf in dual testing mode. This will ...

  3. Tomcat配置自定义JAVA环境

    Tomcat的bin目录下 在setclasspath.sh(Linux系统,Windows系统为setclasspath.bat)文件的开头添加: export JAVA_HOME=/usr/lib ...

  4. mysql中的升序和降序以及一个字段升序和一个字段降序

    mySql中,升序为asc,降序为desc.例如: 升序:select   *  from  表名 order by  表中的字段 asc(mysql中默认是升序排列,可不写) 降序:select   ...

  5. C语言 排序算法总结

    #include<stdio.h> #include<stdlib.h> //作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ # ...

  6. 洛谷模拟NOIP考试反思

    洛谷模拟NOIP考试反思 想法 考了这么简单的试qwq然而依然emmmmmm成绩不好 虽然本次难度应该是大于正常PJ难度的但还是很不理想,离预估分数差很多qwq 于是就有了本反思嘤嘤嘤 比赛链接 原比 ...

  7. googLeNet网络

    1.什么是inception结构 2.什么是Hebbian原理 3.什么是多尺度处理 最近深度学习的发展,大多来源于新的想法,算法以及网络结构的改善,而不是依赖于硬件,新的数据集,更深的网络,并且深度 ...

  8. Linux中的零拷贝技术

    转载:https://www.jianshu.com/p/fad3339e3448 引文## 在写一个服务端程序时(Web Server或者文件服务器),文件下载是一个基本功能.这时候服务端的任务是: ...

  9. maven 标签classifier 研究一下

    研究一下maven的标签: <dependency> <groupId>io.netty</groupId> <artifactId>netty-tcn ...

  10. Linux：Day7(下) 磁盘管理、文件系统管理

    Linux入门 Linux系统管理: 磁盘管理.文件系统管理 RAID基本原理.LVM2 网络管理:TCP/IP协议.Linux网络属性配置 程序包管理:rpm,yum 进程管理:htop,glanc ...