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. HTML表单 CSS样式

    1.HTML表单 <body rightmargin="50" leftmargin="50" background="未标题-1.jpg&qu ...

  2. 【底层原理】深入理解Cache (上)

    存储器是分层次的,离CPU越近的存储器,速度越快,每字节的成本越高,同时容量也因此越小.寄存器速度最快,离CPU最近,成本最高,所以个数容量有限,其次是高速缓存(缓存也是分级,有L1,L2等缓存),再 ...

  3. 利用python搭建Powersploit powershell脚本站点

    powershell脚本站点的搭建 一.Powersploit Powersploit是一款基于powershell的后渗透(Post-Exploitation)框架,集成大量渗透相关模块和功能. 下 ...

  4. June 5. 2018 Week 23rd Tuesday

    Learn to let go and be clear of where you really want to head for. 学会放手,同时也要弄清楚自己的真正所爱. From Kissing ...

  5. MATLAB中冒号的用法

    MATLAB中冒号的用法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ matlab中冒号代表步长,用实例来说明 >> A=[1 2 3 ...

  6. Java String、StringBuilder、StringBuffer[笔记]

    String对象是字符串常量(创建之后不可更改),StringBuilder和StringBuffer对象是字符串变量(可更改),三者主要区别在于执行速度和线程安全. 执行速度 执行速度:String ...

  7. 《Java大学教程》—第16章 二维数组

    多维(Multi-dimensional)数组维数由索引个数决定.常用的数组:一维(one-dimensional)数组.二维(two-dimensional)数组 16.2    创建二维数组索引从 ...

  8. 【Java多线程通信】syncrhoized下wait()/notify()与ReentrantLock下condition的用法比较

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6556925.html  一:syncrhoized使用同一把锁的多个线程用通信实现执行顺序的调度 我们知道,使 ...

  9. DefaultNamespaceHandlerResolver中handlerMappings如何初始化

    前言:最近一直在看Spring源码,今天在调试的时候发现一个小问题:在注册bean时,需要初始化spring默认命名空间处理器,具体在DefaultNamespaceHandlerResolver中实 ...

  10. Java(使用JNA)调用DLL库与C#调用DLL库的对比

    前言:在项目中经常使用DLL库对硬件进行操作,在发卡过程中使用频率尤为多,今天就Java与C#中调用DLL库的使用区别做一个介绍,本文着重具体的代码编写,具体过程看以下代码. 前提条件: 笔者已经封装 ...