为元素设置“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. linux 知识汇总

    1 ) linux下文件系统类型的学习 2 )深入理解linux i节点(inode) 3 )RAID系列

  2. ural1057 Amount of Degrees

    链接 这题有一点小坑点 就是AX^B  A只能为0或者1  ,剩下的就比较好做的了. #include <iostream> #include<cstdio> #include ...

  3. 百度地图 判断marker是否在多边形内

    昨天画了圆形,判marker是否存在圆形内.今天来画多边形,判断marker在多边形内. 需要引入一个js      <script type="text/javascript&quo ...

  4. 20160824_CentOS6.4x64_关闭IPv6

    1.参考网址: http://blog.csdn.net/suplxj/article/details/7773423 2.我的操作: #cat <<EOF>>/etc/mod ...

  5. 由两点坐标如何画出直线 matlab

    由两点坐标如何画出直线  方法1:利用直线方程 斜率加截距 方法2:数据拟合 %由两点坐标得数据拟合直线与画线 x = [,]; y = [,]; k = ((-)/(-));% 由两点坐标得到直线斜 ...

  6. Android Studio UML 插件 PlantUML 使用语法

    活动标签(activity label)以冒号开始,以分号结束. 文本格式支持creole wiki语法. 活动默认安装它们定义的顺序就行连接. @startuml :Hello world; :Th ...

  7. IntelliJ IDEA 设置代码提示或自动补全的快捷键

    IntelliJ IDEA 设置代码提示或自动补全的快捷键   点击 文件菜单(File) –> 点击 设置(Settings- Ctrl+Alt+S), –> 打开设置对话框. 在左侧的 ...

  8. CEF使用的几个注意点

    CEF为chrome浏览器的切入其他浏览器中的轻量级框架. 开发的客户端的时候,这是作为界面显示的首先,可以增强客户的易变性,可塑性. 在开发的过程中(侧重于C,C++解决),遇到的几个问题,以及自己 ...

  9. int转string

    #include<iostream> #include<sstream> #include<string> using namespace std; int mai ...

  10. iOS开发UI篇—直接使用UITableView Controller

    iOS开发UI篇—直接使用UITableView Controller 一.一般过程 // // YYViewController.h // UITableView Controller // // ...