当前位置: 首页 > Web前端 > HTML5

float风格

时间:2023-04-05 23:19:34 HTML5

文档流(正常流)首先理解float需要理解文档流。网页是多层结构,一层一层的,每一层的样式都可以通过CSS控制,用户只能看到最上面的一层,不管下面有多少层,都会被上一层,导致用户看不到。最下面的称为文档流,创建的文档默认排列在文档流中。元素的两种状态是在文档流中和不在文档流中(文档流外)。文档中的元素有什么特点?块元素块元素占据一行,从上到下垂直排列。默认宽度为低电平的100%。默认高度由内容展开。元素不占一行,在页面上从左到右排列。如果一行放不下,元素将切换到第二行显示默认高度。浮动样式由内容设置,浮动的特点是让图片被文字包围。img浮动元素p块级元素代表(感觉不到浮动元素)textinline/inline-block(感觉不到浮动元素)总是高低顺序,浏览器从高到低渲染,后面写的层次更高比先写的层次高背景层的最低层次="块级元素level="浮动层(块级元素感觉不到)=inline/inline-block文本元素和块级元素自然排斥,不会重叠。文本元素不会在浮动元素下方运行,但块级别会在浮动元素下方运行。浮动元素--float可选参数:无默认值元素不向左浮动向左浮动向右浮动向右浮动浮动元素的属性Textwrappingaroundmultipleboxes浮动元素会按照从左到右的顺序排列,如果当前排列不够,就会被“wrapped”“高度塌陷(如果不设置大盒子的高度,里面的所有元素都会浮动,高度塌陷,盒子打不开)解决方法:1.设置高度父元素2.BFC块级格式化上下文3.清除浮动解决高度折叠块级浮动会强制将元素转换为块元素,它具有块元素的所有属性,不具备排他行的特点,默认宽度为父级的100%,该方法向空间缩小,尽可能向前发展。浮动元素尽可能在同一高度的优点1.不解析空格,不垂直对齐problems(inline-blockproblems)2.完美解析margin,没有垂直margin合并的问题浮动元素不能margin:0auto水平居中清除不在浮动元素旁边的浮动元素,遇到浮动元素后换行,清除影响当前元素上的浮动元素。可选值clear:left;清除左侧浮动元素对当前元素的影响clear:right;清除右侧浮动元素对当前元素的影响clear:both;有左浮就清左浮,有右浮就清右浮双方都清除了影响最大的原则。清除浮动后,浏览器会自动为该元素添加上边距,使其位置不会受到其他浮动元素的影响。有没有可以左浮或者右浮的元素?不