您的位置:首页 > Web前端 > CSS

CSS中float浮动属性

2018-03-17 13:08 183 查看
1. 原理:

浮动元素将脱离文档流,漂浮在默认文档流之上。
浮动的元素会向左或者向右移动,直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止。
2. 特点

不管元素如何浮动,始终以父级容器或它前面同层次并列的元素作为参考进行对齐。
一旦元素浮动起来,就可以直接适用CSS盒子模型属性。(行间元素脱离默认文档流的行间限制)
尽管浮动元素脱离了默认文档流,但仍然会影响到默认文档流中的盒子里面装的“内容”(图片或文本),这些“内容”会给浮动元素留出占位。ps:图文环绕的版式效果就是这么得来的。
3. 作用:

将页面元素浮动起来,使其能够向左或向右排列。
4. 应用

实现页面中布局的左右排版。
实现图文环绕的版式效果。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  float浮动属性