为元素设置“float”样式之后，元素会脱离标准文档流，不再占据原来的空间。后续元素会向前移动，占据这个新的空间。后续的文本会围绕着浮动元素分布，形成一种环绕布局的现象。

　　示例代码：

　　

 <!DOCTYPE html>

 <html>

 <head>

     <title>test page</title>

     <meta charset="utf-8">

     <style type="text/css">

         #ele-1 {

             width: 100px;

             height: 50px;

             background-color: #3E3;

             float: left;

         }

         #ele-2 {

             width: 500px;

             background-color: #EE3;

         }

     </style>

 </head>

 <body>

     <div id="ele-1">Div area!</div>

     <p id="ele-2">

         This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!

     </p>

 </body>

 </html>

　　显示效果如下：

　　现在分别为“<p>”标签添加“clear:left”和“overflow:hidden”样式，消除这种环绕效果！

　　添加样式“clear:left”之后，显示效果如下：

　　添加样式“overflow:hidden”之后，显示效果如下：

　　可以通过合理的使用这两种样式效果实现页面布局。

使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响的更多相关文章

  1. HTML。CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

  2. HTML-CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

  3. CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

    常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...

  4. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

  5. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  6. CSS浮动元素的水平居中

    方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  7. 清除浮动元素的margin-top失效原因（更改之前的错误）

    //样式代码body,div{ margin:; padding:; } .box1{ background:#900; width:200px; height:200px; margin:20px ...

  8. bfc与浮动元素的关系

    首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...

  9. CSS 教程 - 闭合浮动元素

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...

随机推荐

  1. SQL循环索引

    ),dates datetime) insert @tbl(order_id,dates) select 'A','2014-1-1' union select 'A','2014-2-1' unio ...

  2. JavaScript中的String

    1.基本类型String var str ="helloworld"; 要记住:保存的是Unicode字符,一旦创建便不可变   2.引用类型String var strObj = ...

  3. pyc 文件反编译 py uncompyle2

    一.工具 https://github.com/Mysterie/uncompyle2 -----------------------2016-6-3 11:24:19-- source:[1]用un ...

  4. java高薪之路__009_网络

    1. InetAddress类2. Socket: IP地址和端口号的结合,socket允许程序把网络连接当成一个流,数据在两个socket间通过IO传输, 通信的两端都要有socket. 主动发起通 ...

  5. CSS 3 盒子属性

    #box1{ width: 100px;height: 40px; border: 1px solid black;(1)内容沾满盒子的处理方式 所有的都要添加前缀,以便更好的浏览器兼容  1,ove ...

  6. unity htc vive使用

    本文介绍如何在Unity中使用HTC vive设备,当前VR作为市场比较火热的热点,HTC VIVE设备作为三大供应商之一,许多人购买了该设备,却不知道如何使用,本文通过图文并茂的形式,进行手把手的讲 ...

  7. Aptana STUDIO 3 使用（续）

    1 使用Aptana studio 3 浏览ruby代码 2 设置gbk编码.打开Aptanna Studio,选择Windows->Preferences->General->Co ...

  8. C#窗体 LISTVIEW

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. uva 211（dfs）

    211 - The Domino Effect Time limit: 3.000 seconds A standard set of Double Six dominoes contains 28 ...

  10. Druid（准）实时分析统计数据库——列存储+高效压缩

    Druid是一个开源的.分布式的.列存储系统,特别适用于大数据上的(准)实时分析统计.且具有较好的稳定性(Highly Available). 其相对比较轻量级,文档非常完善,也比较容易上手. Dru ...