程序员之家
程序员之家

CSS 浮动


什么是 CSS Float(浮动)?

CSS 的 float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

float(浮动),往往是用于图像,但它在布局时一样非常有用。


元素怎样浮动

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

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

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

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

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

img
{
    float:right;
}

彼此相邻的浮动元素

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

在这里,我们对图片廊使用 float 属性:

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

清除浮动 - 使用 clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊:

.text_line
{
    clear:both;
}

CSS 中所有的浮动属性

"CSS" 列中的数字表示不同的 CSS 版本(CSS1 或 CSS2)定义了该属性。

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1

 


手机扫码阅读本文


本文来自互联网,本网站转载的目的在于传递更多信息以供访问者学习参考,所属内容只代表原作者的个人观点,不代表本网站的立场和价值判断,版权归原作者所有。如有侵犯您的版权,请联系我们,我们收到后会尽快核实并第一时间改正。


上一篇
下一篇

手机扫码阅读本文

Bootstrap入门经典【图】
Bootstrap入门经典

热门Web开发 Javascript框架 HTML CSS网站建设 网页设计制作 零基础读者杰出Bootstrap教程 全面涵盖常见组件的使用方法 书中代码真实有效可运行

Vue.js 3.x+Element Plus前端开发实战(Web前端技术丛书)【图】
Vue.js 3.x+Element Plus前端开发实战(Web前端技术丛书)

一本资深Web前端开发工程师编写的ElementPlus框架书

Javascript高级程序设计(第4版)【图】
Javascript高级程序设计(第4版)

web前端开发教程,JS"红宝书"升级,入门+实战,涵盖ECMAScript,2019,提供教学视频+配套编程环境,可直接在线运行随书代码

css css-float