<!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. CSS3中更灵活的布局方式

    flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果. flex布局与常规布局截然不同,常规布局虽然 ...

  2. System.InvalidOperationException: 无法加载协定为“ServiceReference1.XXXXXXXXXXXXXXXX”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。

    <system.serviceModel> <bindings> <basicHttpBinding> <binding name="testWeb ...

  3. Linux命令——创建删除文件

    创建文件夹 mkdir filename 进入目录文件 cd filename 返回上一级目录 cd ..返回多级目录   cd ../../.. (../表示一级) 创建文件 touch filen ...

  4. Flask 快速入门

    最简单的flask程序 from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return ...

  5. HTML&CSS基础学习笔记1.30-颜色的表达

    颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...

  6. D题（贪心）

    D - D Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u     Descripti ...

  7. 《简明python教程》学习笔记，长文

    引号: 单引号:如果包含的字符串里有单引号的话,需要在那个单引号里加转义符号,或者使用双引号 例:print 'he"llo' or print 'he\'llo'    ===> h ...

  8. 感兴趣的Linux发行版

    1. Ubuntu,包括KUbuntu,XUbuntu,Kyrin等等 2. BluestarLinux - 基于Arch Linux,感觉很美 http://sourceforge.net/proj ...

  9. haskell入门

    斯坦福公开课<编程范式>中介绍了Scheme(但是不仅仅是Scheme,它只是作为函数式语言的代表),最后一课介绍了Haskell... “Hello World!”是学习一门语言的魔咒 ...

  10. java代码调用rtx发送提醒消息

    http://www.cnblogs.com/qstar/archive/2012/02/03/Astar.html 借用一下!好东西