CSS浮动（float）

最新推荐文章于 2024-07-24 14:20:14 发布

plus21n

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量272

点赞数

文章标签： css

本文链接：https://blog.csdn.net/plus21n/article/details/109687511

版权

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：


img
{
    float:right;
}

彼此相邻的浮动元素

把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片使用 float 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
    .image{
	    float:left;
	    width:110px;
	    height:90p；
    }
    img{
        width: 100px;
        height: 70px;
    }
</style>
</head>

<body>
<p>asdfghjkl</p>
<img class="image" src="flower.jpg">
<img class="image" src="flower.jpg">
<img class="image" src="flower.jpg">
</body>
</html>

效果图为
在这里插入图片描述

清除浮动的四种方法

给浮动的元素的祖先元素加上高度
如果一个元素要浮动,那么它的祖先元素一定要有高度，有高度的盒子才能关住浮动，只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了。

  <div>   → 设置height
      <p></p>
      <p></p>
      <p></p>
  </div>
 
  <div>   → 设置height
      <p></p>
      <p></p>
      <p></p>
  </div>

clear:both；
clear就是清除,both指的是左浮动,右浮动都要清除。


.text_line
{
    clear:both;
}

但是使用这个方法，margin就会失效

隔墙法与内墙法
隔墙法：在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。

   <div>
       <p></p>
       <p></p>
       <p></p>
   </div>
 
   <div class="wall"></div>
 
   <div>
       <p></p>
       <p></p>
       <p></p>
   </div>

 内墙法：将墙修在了父类里面。

   <div>
       <p></p>
       <p></p>
       <p></p>
       <div class="wall"></div>
   </div>
 
   <div>
       <p></p>
       <p></p>
       <p></p>
   </div>

overflow:hidden;
overflow:hidden;的本意是将超出父类的部分隐藏，就是将所有溢出盒子的内容，隐藏掉。

plus21n

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动（float）

什么是 CSS Float（浮动）？CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素怎样浮动元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：img{ float:right;}
复制链接

扫一扫