为元素设置“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. Element is not currently visible and so may not be interacted with错误

    用selenium定位时,碰到这种错误的原因: 此种问题的关键是在于用className和id都不唯一所以找不到对象 所以,碰到这种问题就换一种定位方式

  2. Gradient Boost Decision Tree（GBDT）中损失函数为什么是对数形式

    由于最近要经常用到XGBOOST的包,不免对相关的GBDT的原理又重新学习了一遍, 发现其中在考虑损失函数的时候,是以对数log进行度量的,囿于误差平方和函数的印象 那么为什么是对数呢?可能是下面的原 ...

  3. ArrayList其实就那么一回事儿之源码浅析

    ArrayList 算是常用的集合之一了,不知作为javaner的你有没在百忙之中抽出一点时间看看ArrayList的源码呢. 如果看了,你会觉得其实ArrayList其实就那么一回事儿,对吧,下面就 ...

  4. hdu 5877/ 2016 ACM/ICPC Dalian Online 1010 Weak Pair

    题目链接 分析:树上的节点祖先与儿子的关系,一般就会想到dfs序.正解就是对树先进行dfs序排列,再将问题转化到树状数组统计个数.应该把节点按照权值从大到小排序,这样对于,就是从小到大的顺序.这样更新 ...

  5. Oracle 字符串分割排序冒泡算法

    例子: 一个字符串"11,15,13,17,12",以逗号分割,现在要排序成"11,12,13,15,17". 写了一个实现方法,记录下来以备后用: ----- ...

  6. iOS开发多线程篇—线程间的通信

    iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...

  7. SRM 657 DIV2

    -------一直想打SRM,但是感觉Topcoder用起来太麻烦了.题目还是英文,不过没什么事干还是来打一打好了.但是刚注册的号只能打DIV2,反正我这么弱也只适合DIV2了.. T1: 题目大意: ...

  8. Ubuntu下安装Java环境

    1 Java 8 下载地址 http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk8-downloads-2133151-zhs. ...

  9. UINavigationController导航控制器

    UINavigationController导航控制器,是多个界面间跳转的重要元素,可以理解为它存储着多个viewController,它的存储结构是栈,栈的特点是先进后出,所以添加视图控制器时,要特 ...

  10. Android MediaPlayer和SurfaceView播放视频

    昨天介绍了VideoView播放视频,今天再介绍一种播放视频的方法MediaPlayer和SurfaceView,MediaPlayer播放音频,SurfaceView来显示图像,具体步骤如下: 1. ...