css中元素的浮动和清除浮动的影响

用float属性可以使元素浮动到包含框内的左右边使文本围绕它,这里创建一个包含框内有段落和一个小的div并被包围:

<html>
  <head>
  <title><title>
<style type="text/css">
div{
    border:1px solid red;
    width:200px;
            height:200px;
            }

         .div1{
               background-color:yellow;
               float:right;
               width:100px;
               height:100px;
              }
</style>
</head>
<body>
<div>
    <div class="div1">
       <p>用float属性可以使元素浮动到包含框内的左右边使文本围绕它,这里创建一个包含框内有段落和一个小的div:</p>
     </div>
</div

上面浮动元素从文档流中脱离出来的同时对布局中其它元素造成影响, 使围绕他的元素重新布局。

要让浮动元素某一边的区域被清除,后面的元素从元素的正常位置开始显示,可以使用clear属性不

让一个元素出现在浮动元素后面:

<html>
  <head>
  <title><title>
<style type="text/css">

       div{
             border:1px solid red;
             width:200px;
             height:400px;
             }

       .div1{
               background-color:yellow;
               float:right;
               width:100px;
               height:100px;
              }

           h2{
               clear:left;
               }
</style>
</head>
<body>
<div>
    <div class="div1">
       <p>用float属性可以使元素浮动到包含框内的左右边使文本围绕它,这里创建一个包含框内有段落和一个小的div:</p>
      <h2>这里用CLEAR属性可以清除浮动元素</h1>
     </div>
</div
</body>
</html>
时间: 2024-12-12 06:13:02

css中元素的浮动和清除浮动的影响的相关文章

CSS中的浮动和清除浮动,梳理一下!

CSS中的浮动和清除浮动,梳理一下! 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧. 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景.

详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法) 博客正文:   1.css块级元素讲解 常见的块级元素主要有以下几种:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<addr

css浮动和清除浮动

浮动存在的原因 在word排版中,文本可以环绕图片.在css中,想要实现文字环绕的效果,只能借助于float,没有其他的替代方式.在实际中,文档的布局经常会使用浮动. float属性 float属性,默认为none,也就是标准流通常的情况.如果将float的属性的值设置为left或right,元素就会向其父元素的左侧或右侧紧靠. inherit表示从父元素继承float属性的值. clear属性 clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为

CSS浮动与清除浮动(overflow)例子

在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神奇,于是乎就去问了师匠: Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are e

CSS学习摘要-浮动与清除浮动

float 浮动float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部分的流动性(与绝对定位相反). 一个浮动元素是float的值不为none的元素. /* Keyword values */float: left;float: right;float: none;float: inline-start;float: inline-end; /* Global values */float: inherit;float

关于浮动与清除浮动,你应该知道的

我在做页面布局的时候,多多少少总会受到来自浮动的困扰,因此专门通过实践来总结一下浮动与清除浮动. 首先总结几个基础的概念: 浮动:设置浮动的元素会脱离文档流,不会影响块元素的布局,但是会影响内联元素的排列[通常是文本]: 文档流:在文档流中,块元素会单个元素独占一行 接下来我们通过实际演示来看看关于浮动的那些事儿. 下面是5个div块元素在文档流中一次排列 我们知道浮动元素有几个规律 如果浮动元素的上一个元素也是浮动,那么该元素会与上一个元素排列在同一行,如果行宽不够,后面的元素会被挤到下一行

CSS中元素空间占用

div元素中ul li是最常用布局元素. div元素没有明确指定空间值,会依随内容空间值而变化.例:内容空间高度是100px,那此DIV默认也是100PX:宽度默认是100%. ul元素没有明确指定空间值,高度就是1px,宽度随内容空间值变化.例:内容空间高度是100px;在没有指定ul元素高度与定位绝对值时,给ul设定一个下边框线.这条边框线会跑在UL元素内容上方.如果要改变这种UL高度就给出height值. li元素同DIV元素一样.没有明确指定空间值,会依随内容空间值而变化. CSS中元素

css中的浮动以及清除浮动

对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也会去复习以前的知识,这是真正会让我们有所提高的一个过程,是所谓温故而知新.那么在学习的过程中也看了很多大神的博客,这里就来总结一下我个人对于float的理解; css的浮动使我们在布局的时候经常会用到的一个属性,在大量的使用过程中,我们可能只是一知半解的去使用,或者使用的时候得到了自己想要的结果就绝