HTML布局方式：浮动

float

块元素在文档流中默认是垂直排列，如果希望块元素横向布局，可以用float

float 可以使元素浮动，向父元素的左侧或右侧浮动，脱离文档流

可选值：

none 默认值不浮动

left 像页面的左侧浮动

right 像页面的右侧浮动

浮动的特点

1:浮动元素脱离文档流之后，不会再占有文档流的位置，它下边的元素会立即向上移动

2:元素浮动之后，元素会尽量的向页面的左上或右上浮动

3:浮动元素默认会在父元素区域内活动，不会从父元素中移出

4:浮动元素上面是一个没有浮动块元素，则浮动元素无法上移

高度塌陷

在文档流中，父元素的高度是被子元素撑开

若子元素浮动，脱离文档流，会导致我们父元素高度丢失，我们叫高度塌陷

会影响页面布局，这个必须解决

解决方法

1、给父元素设置固定高度，但在实际开发过程中，高度都是被内容撑开（不常用）

2、设置overflow设置为一个非visible的值，一般使用overflow：hidden；

3、给父元素使用after伪劣解决

xx::after{content: '';display: block;clear: both;
}

HTML布局方式：浮动相关推荐

常见的CSS页面布局方式
详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式公共的样式部分 <style>* ...
元素，布局方式，BFC和清除浮动
元素:块级元素,内联元素,内联块状元素块级元素:在默认情况下会独占一块区域相对于块级元素的父元素来讲,块级元素占据的行默认是单独享有的. ...
CSS的三大布局方式（流式布局，浮动布局和层布局）
文章目录前言一.标准文档流二.三种布局方式 1.流式布局 2.浮动布局 (1)字围效果 (2)圣杯布局 3.层布局定位的分类: (1) 相对定位 position:relative (2) 绝 ...
asp.net 网页做一个浮动层_【CSS】7 页面布局：浮动
传统网页的3种布局方式: 普通流(标准流):标签按规定好的默认方式排列浮动定位 1.为什么需要浮动浮动:很多网页布局标准流不能实现的,可以用浮动来做,因为浮动可以改变元素标签的默认排列方式i. ...
前端学习总结——CSS布局方式之传统布局
传统布局传统布局即是早期在平板电脑.智能手机等移动设备并不流行的时候使用的布局方式. 一.表格布局例如:采用表格方式实现如下简单模型的布局 (1)固定布局即用具体的像素值来确定模型的宽和高等值. ...
css宽高自适应布局，实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
常见的几种页面内容布局方式
在前端开发中页面布局总是最开始的工作,就像盖楼时,先搭框架,然后再填砖,前端也是一样的,先做好页面的布局工作. 通过浏览不同的网站发现,页面的布局都是大同小异,总结下来大概就几种: 第一种: 单列布局 ...
CSS的三种布局方式
前言所谓布局,就是指定把一个盒子放在合适的位置称为"布局" 流式布局(最简单,盒子的默认布局) 百分比布局,通过盒子的宽度(百分比)来根据屏幕的宽带来进行收缩,不受固定像素的限制 ...
css的3种布局方式
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 1.文档流布局方式,这是最基本 ...