<!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. jQuery中事件的学习

    刚学习了jQuery中的事件,主要通过bind(),toggle(),hover()来主要实现,下面先说一说关于bind的想关要点. 1.bind方法. bind方法的主要参数为bind(type,f ...

  2. 初涉JavaScript模式 (7) : 原型模式 【三】

    组合使用构造函数模式和原型模式 上篇,我们提到了原型模式的缺点,就是每个实例不能拥有自己的属性,因为纯原型模式所有的属性都是公开给每个实例的,故我们可以组合使用构造函数模式和原型模式.构造函数用来定义 ...

  3. MYSQL一对多，两表查询合并数据

    select a.askid,a.title,GROUP_CONCAT(b.message SEPARATOR '----') as content from gg_ask as a join gg_ ...

  4. 适应手机端的jQuery图片滑块动画

    一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式,可以有平移.翻 ...

  5. jquery ajax（4）.getjson（）

    .getJSON()实例 .each()实例 $(function(){ $('#send').click(function() { $.getJSON('test.json', function(d ...

  6. 关于什么时候用pop什么时候用dismiss

    假如你是类似于这样跳转过来的self presentViewController: animated: completion:那么你回去的时候就要dismiss假如你是这样跳转过来的 self.nav ...

  7. 信号量 sem_t 进程同步

    sem_t分为有名和无名.有名的sem_t通过sem_open来创建, 而无名的sem_t通过sem_init的初始化. 用有名的sem_t来进程间同步是件很容易的事情,百度上一搜很多想相关的例子. ...

  8. 如何做好PPT？

  9. KEIL C51的XBYTE关键字

    The XBYTE macro allows you to access individual bytes in the external data memory of the 8051. You m ...

  10. 【HDOJ】2150 Pipe

    计算几何的基础题目.是时候刷刷计算几何了. /* 2150 */ #include <cstdio> #include <cstring> #include <cstdl ...