为什么css会出现浮动

2023-03-26 15:41:02html-css09

为什么css会出现浮动,第1张

CSS.2中才引入浮动，当时浮动的初衷，是实现类似word里的文字环绕图片的效果。

普通文档流，因为从上到下，从左到右，规定的太死了，每个元素都被限制了位置。所以才引入了浮动，形成丰富的页面效果。

定位的引入，更加增强了，页面布局的可能。

总的来说，页面布局的时候，有三种布局方式：普通文档流，浮动，定位。

希望对你有所帮助。希望能采纳。

四种清除浮动方法如下：

1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用

元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，

本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。<style type=”text/css”>

<!–

*{margin:0padding:0}

body{font:36px boldcolor:#F00text-align:center}

#layout{background:#FF9}

#left{float:leftwidth:20%height:200pxbackground:#DDDline-height:200px}

#right{float:rightwidth:30%height:80pxbackground:#DDDline-height:80px}

.clear{clear:both}

–>

</style>

<div id=”right”>Right</div>

</div>

2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容IE6，也可以用width:100%。

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；<style type=”text/css”>

<!–

*{margin:0padding:0}

body{font:36px boldcolor:#F00text-align:center}

#layout{background:#FF9overflow:autozoom:1} /* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/

#left{float:leftwidth:20%height:200pxbackground:#DDDline-height:200px}

#right{float:rightwidth:30%height:80pxbackground:#DDDline-height:80px}

–>

</style>

<div id=”right”>Right</div>

</div>

3、使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。<style type=”text/css”>

<!–

*{margin:0padding:0}

body{font:36px boldcolor:#F00text-align:center}

#layout{background:#FF9}

#layout:after{display:blockclear:bothcontent:”"visibility:hiddenheight:0}

#left{float:leftwidth:20%height:200pxbackground:#DDDline-height:200px}

#right{float:rightwidth:30%height:80pxbackground:#DDDline-height:80px}

–>

</style>

<div id=”right”>Right</div>

</div>

4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。

但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。<style type=”text/css”>

<!–

*{margin:0padding:0}

body{font:36px boldcolor:#F00text-align:center}

#layout{background:#FF9float:left}

#left{float:leftwidth:20%height:200pxbackground:#DDDline-height:200px}

#right{float:rightwidth:30%height:80pxbackground:#DDDline-height:80px}

–>

</style>

<div id=”right”>Right</div>

</div>

1、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。

2、然后通过background给div添加一张图片作为它的背景。