<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>登录界面</title>

    <style type="text/css">

    #a,#b,#c{

        height: 80px;

        width:120px;

        border: solid 1px pink;

        float: left;  /*左浮动*/

       /* float: right;  /!*右浮动*!/*/

    }

    #main{

        width: 350px;

        height: 150px;

        border: solid 1px red;

        overflow: scroll;

         /*内容溢出的默认属性值

         visible:默认值  溢出部分显示

         scroll：溢出部分滚动条显示

         hidden:溢出部分隐藏

         auto:自动调整

         */

    }

    </style>

</head>

<body>

<div id="main">

    <div id="a">这是第1个盒子</div>

    <div id="b">这是第2个盒子</div>

    <div id="c">这是第3个盒子</div>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>display</title>

    <style type="text/css">

        span{

            /**

            display：属性

            block：块元素

            none:不显示

            inline：行内元素

            inline-block：块元素 在一行显示

            */

            display: block;/* 块元素*/

            height: 20px;

            width: 200px;

            border: 1px solid red;

        }

        div{

            height: 20px;

            width: 200px;

            border: 1px solid red;

            display: inline;/*行内元素*/

        }

    </style>

</head>

<body>

 <div>这是一个div1</div>

 <div>这是一个div2</div>

 <span>这是一个span1</span>

 <span>这是一个span2</span>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>防止父级边框塌陷</title>

    <link href="css/float.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div id="father" class="clear"><!--04.使用after伪类-->

    <div class="layer01"><img src="data:image/photo-1.jpg" alt="日用品"/></div>

    <div class="layer02"><img src="data:image/photo-2.jpg" alt="图书"/></div>

    <div class="layer03"><img src="data:image/photo-3.jpg" alt="鞋子"/></div>

    <div class="layer04">

        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。

    </div>

    <!-- 01. 空div  防止父级边框塌陷

    <div class="clear"></div>-->

</div>

</body>

</html>
div {

    margin:10px;

    padding:5px;

}

#father {

    border:1px #000 solid;

    /*02.给父级设置高度防止边框塌陷

    height: 350px;*/

    /*03.overflow防止边框塌陷

    overflow: hidden;*/

}

.layer01 {

    border:1px #F00 dashed;

    float: left;

}

.layer02 {

    border:1px #00F dashed;

    float: left;

}

.layer03 {

    border:1px #060 dashed;

    float: left;

}

.layer04 {

    border:1px #666 dashed;

    font-size:12px;

    line-height:23px;

    width: 200px;

    float: left;

}

/*04.after伪类防止父类边框塌陷*/

.clear:after{

    content: ''; /*在clear元素之后添加一个空内容*/

    display: block;/*把添加的内容转换成了块元素*/

    clear: both;/*清除这个元素所有的浮动*/

}

/* 01.空div标签

.clear{

    clear: both;

    margin: 0px;

    padding: 0px;

}*/
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style  type="text/css">

       #main{

           width: 200px;

           height: 150px;

           border: 1px solid orange;

           /**

           visible：默认值！内容不会隐藏，但是会在盒子之外显示！

           hidden：溢出的部分会隐藏！

           scroll:显示横向和纵向的滚动条

           auto:显示纵向的滚动条

           */

           overflow:hidden ;

       }

    </style>

</head>

<body>

  <div  id="main">

      <img src="data:image/wine.jpg">

      <p>这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片

          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片

          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片

          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片</p>

  </div>

</body>

</html>

css09浮动属性的更多相关文章

  1. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  2. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  3. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  4. 浅谈CSS浮动属性

    要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流:   在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充.   HTML页面的标准文档流(默 ...

  5. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  6. [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  7. 浮动属性（float)

    (1.浮动是一种脱离标准文档流的形式. 作用:浮动就是用来制作多个盒子并排显示,也能设置宽高,负责网页排版 1 float:left;  左浮动 2 float:right; 右浮动 3 float: ...

  8. CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

  9. CSS基础之浮动属性float图文详解

      宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”.   标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...

随机推荐

  1. 【USACO 3.2.4】饲料调配

    [描述] 农夫约翰从来只用调配得最好的饲料来喂他的奶牛.饲料用三种原料调配成:大麦,燕麦和小麦.他知道自己的饲料精确的配比,在市场上是买不到这样的饲料的.他只好购买其他三种混合饲料(同样都由三种麦子组 ...

  2. TIMESTAMP和DATETIME的区别

    TIMESTAMP和DATETIME的区别 1. 存储空间不同 a) TIMESTAMP占用4个字节 b) DATETIME占用8个字节 2. 受时区影响 c) TIMESTAMP实际记录的是1970 ...

  3. 在VMware安装Centos再安装Oracle数据库（个人学习使用）

    打开VMware 选择稍后安装 自定义安装 小生安装的是64位的Centos 给虚拟机设置名称和安装位置 设置虚拟机打处理器并分配内存(oracle12G我建议内存为2G以上) 网络类型选择仅主机模式 ...

  4. 2.2.2 从 Path 中获取信息

    Demo: import java.nio.file.Path; import java.nio.file.Paths; public class PathInfoTest { public stat ...

  5. python抓取网页图片

    本人比较喜欢海贼王漫画,所以特意选择了网站http://www.mmonly.cc/ktmh/hzw/list_34_2.html来抓取海贼王的图片. 因为是刚刚学习python,代码写的不好,不要喷 ...

  6. C语言基础学习基本数据类型-Char类型

    char类型 char类型用于储存字母和标点之类的字符.但是在技术实现上char却是整数类型.为了处理字符,计算机使用一种数字编码,用特定的整数表示特定的字符.字符变量输入输出用%c符号.定义语法如下 ...

  7. TCP回射客户程序：str_cli函数

    str_cli函数完成客户处理循环: 从标准输入读入一行文本,写到服务器上,读回服务器对该行的回射,并把回射行写到标准输出上 读入一行,写到服务器 fgets读入一行文本,writen把该行发送给服务 ...

  8. jQuery全选、反选、全不选

    原文链接:https://yq.aliyun.com/articles/33443 HTML内容部分: <ul id="items"> <li> <l ...

  9. Linux——搭建PHP开发环境第二步：PHP

    原文链接:http://www.2cto.com/os/201511/450258.html ##### PHP 编译安装 #### [root@localhost ~]# yum install l ...

  10. 触摸事件 - UIControlEvents

    首先,UIControlEvents有这个几种: UIControlEventTouchDown           = 1 <<  0,      // on all touch dow ...