您的位置：首页 > Web前端 > CSS

css浮动模型初理解

2016-04-17 23:33 561 查看

浮动模型，开始之初是为了解决图文布局而产生的。大家都知道，块级元素是按照从上到下排列的，并且尽管设置了宽度仍然独自霸占一行，如何让块级元素不独占一行，让在宽度之外让其他标签占用呢？这就需要浮动模型了。

要设置浮动，就要设置一个float属性。这个float属性有三个值，分别是left左浮动，right又浮动和none不浮动。设置了float属性的元素，会向一边靠拢，直到触碰到标签的边界为止（在盒模型中边界包括margin）。如以下代码：

<!DOCTYPEhtml>

<htmllang="en">

<head>

       <meta charset="UTF-8">

       <title>Document</title>

       <style type="text/css">

       .div1{

              height: 20px;

              width: 100px;

              background-color: red;

       }

       .div2{

              height: 20px;

              width: 100px;

              background-color: blue;

       }

       </style>

</head>

<body>

       <div class="div1">演示1</div>

       <div class="div2">演示2</div>

</body>

</html>

将其中的css样式改为

       .div1{

              height: 20px;

              width: 100px;

              background-color: red;

              float: left;

       }

       .div2{

              height: 20px;

              width: 100px;

              background-color: blue;

              float: left;

       }

就可以看到，两个块级元素乖乖的排在一行上了（大家也可以试着把其中一个left改为right，可更直观了解float属性）

当然，设置了float属性的元素依然处于标准文档流中，会对后面的元素产生影响，例如这段代码：

<!DOCTYPEhtml>

<htmllang="en">

<head>

       <meta charset="UTF-8">

       <title>Document</title>

       <style type="text/css">

       .div1{

              height: 20px;

              width: 100px;

              background-color: red;

              float: left;

       }

       .div2{

              height: 20px;

              width: 100px;

              background-color: blue;

              float: right;
       }

       </style>

</head>

<body>

       <div class="div1">演示1</div>

       <div class="div2">演示2</div>

       <p>1111111111111111111111111111111111111</p>

</body>

</html>

我们想让<P>标签在<div>下面，但是由于设置了浮动，它跑到两个div标签中间去了，达不到我们期望的效果，怎么办，当然有办法。

常用的清除浮动的影响的有clear，分别可以设置left，right 和 both，分别代表清除左浮动影响，清除右浮动影响和同时清除两个浮动影响。另外还有可以设置元素宽度width：100%或者固定宽度，并且设置overflow：hidden属性，也就是超出宽度自动隐藏属性（也就是移出属性）。对上述代码加上

p{

              clear: both;

       }

或者

p{

              width: 100%;

              overflow: hidden;

       }

都能达到想要的效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航