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. jsp include 报错：illegal to have multiple occurrences of contentType with different values (old: text/html; charset=UTF-8, new: text/html; carset=UTF-8)

    严重: Servlet.service() for servlet jsp threw exception org.apache.jasper.JasperException: /jsp.jsp(1, ...

  2. python Django 文件下载示例

    from django.http import StreamingHttpResponse#文件流 def big_file_download(request): # do something... ...

  3. python第一百零八天---Django 3 session 操作

    上节内容回顾: 1.请求周期 url> 路由 > 函数或类 > 返回字符串或者模板语言? Form表单提交: 提交 -> url > 函数或类中的方法 - .... Ht ...

  4. SQL 一列拆分多行

    select a.col1,b.col2 from (select col1,col2=convert(xml,' <root> <v>'+replace(col2,',',' ...

  5. Vue学习之路6-条件渲染

    条件指令 所谓条件指令是指满足某个条件时执行哪部分代码,不满足条件时执行哪部分条件代码.vue条件指令有v-if,v-else-if,v-else三个,v-if条件渲染用来指示元素是否移除或者插入,根 ...

  6. vue-cli笔记

    总是忘,留个笔记. vue-cli A simple CLI for scaffolding Vue.js projects. Installation Prerequisites: Node.js ...

  7. Spring缓存注解@Cacheable、@CacheEvict、@CachePut使用

    从3.1开始,Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事务管理的支持.Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该 ...

  8. Nginx 安装配置

    Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. ...

  9. Go搭建后台服务学习记录

    资料: 1. go基础 https://juejin.im/entry/58329f84da2f600063074382 https://www.w3cschool.cn/go/ 2.go的一个orm ...

  10. UEditor学习笔记1

    首先对于前段时间遇到的一些总结做下记录: 0 == ''  => true transition,渐变属性,其值可以是某属性,也可以是all,如transition: all 0.3s:鼠标放到 ...