css 强制换行_CSS 布局

标准文档流

元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。

HTML就是一种标准文档流文件。

HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级

• 微观现象

①空白折叠现象。

②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。(图片以基线对齐)

③自动换行，元素内一行内容写满元素的 width 时会自动进行换行。

img

img

• 元素等级

在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。

块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等。

特点:

1. 块级元素可以设置宽高，在浏览器中正常加载。
2. 块级元素必须独占一行，不能与其他任何标签并排一行。
3. 块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度。

行内元素：大部分的文本级标签，比如 <span>、<a>、<b> 等。

特点:

1. 行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但易有加载问题。
2. 行内元素可以与其他的行内或行内块元素并排一行显示。
3. 行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

注意一点 这里的input 虽然超出了父元素的宽度 但因为它不能换行 所以只能超出显示

span 设置padding属性30px 但是padding是以它原来的位置向四周扩散30px 并不是让span 下移再添加 因此盖住了原来的内容 border也相同

行内块元素：比如 <img>、<input> 等。

1. 行内块元素可以设置宽度和高度。
2. 行内块元素可以与其他的行内或行内块并排一行显示。
3. 行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
4. 行内块依旧具有标准流的微观性质，例如空白折叠现象。

显示模式 display

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。

元素根据属性值不同，可以加载对应元素等级的显示模式的特点

脱离标准流

display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。

浮动

浮动让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

属性值: left 左浮动 right 右浮动

• 浮动的性质:

1.浮动的元素脱离标准流

浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。

2.浮动的元素依次贴边

浮动方向设置不同，进行布局时，加载位置方向不同。

以 left 为例：父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边

父元素左边←子元素1←子元素2← 子元素3←子元素4。

!父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。

一般情况

宽度不够 高度不影响时

4后面的宽度不够 但是3后面的宽度是够的 但之所以跳过了3,2的后面 而在1后贴边 是因为 2,3的高度与4一样,并没有足够的高度可以让5贴

宽度也不够 同时高度也影响它 4后宽度不够 3后 宽度够 高度不够 因此贴2

这种情况 留给5的宽度不够 但是要注意 即使3的宽度长于5的宽度 高度小于4的高度 但是5在挨边时 并不会进入空隙中 也就是不会钻空 因为高度受4的影响

5的宽度超过了父元素，只会出现溢出现象 并不会继续往上一级贴边 还在父元素div内部

浮动依次贴边的应用 ---做表格

表格边框线 不是border 而是用 padding和margin 模拟出来的

!!一定要注意 是li的背景色覆盖ul的背景色 从而让边框露出 所以浅色的是ul

同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况。

!!! 这种布局 只需要一个父盒子 里面再装子元素即可 不需要再分别套盒子

3.浮动的元素没有margin塌陷

4.浮动的元素让出标准流位置

元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。

!在 IE6 , 7浏览器中有兼容问题 IE7 没有压盖住而是水平排列 IE5 不仅水平排列还会有空隙

因此这种效果用定位来实现 另外如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。

5.字围现象

与压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。

可利用字围现象制作一些特殊的图文混排布局效果 这存在 IE兼容问题

2 这个数字并没有被盖住

• 浮动的问题

标准流中的元素若不设置高度，会被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流中父元素的。

父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

以上问题解决方法就是清除浮动带来的影响

• 清除浮动

1. 给标准流的父元素一个合适的高度 但父元素高度不是自适应

有设置margin-top 10px

2.给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。

属性: left 清除前面左浮动带来的影响 right 右浮动 both 清除前面所有浮动带来的影响

问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确

边距还在 只是看不出来因为10px太小

黄色区域就是margin 设置成300px 中间会有空隙 但是也不对 有一部分被盖住

3.隔墙法

外墙法:

在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear：both 属性。

可通过给cl 设置高度来模拟margin的效果

问题：父元素没有高度自适应

内墙法:

在父元素内 所有浮动子元素后添加一个空的 <div> 元素，标签高度为 0，添加 clear属性。

!!原理: 在父元素中 (红色边框内) 前面4个元素都是浮动的(蓝色) 都不能撑开父元素,但是在他们的后面我们添加了一个标准流元素.cl 由于其已经设置了clear 属性,已经清除了前后浮动元素所带来的影响,(它不会占有因浮动而让出的位置)它按标准流的方式排列,虽然他没有高度,但因为他位置在浮动元素的下面,所以他撑起了父元素的高度

缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。

4.伪类

本质是使用伪类方法利用css代码书写一堵内墙。

伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。

:after：这个伪类表示选中的是某个标签内部的最后的位置。

书写方法：前面必须加普通的选择器，后面连续书写伪类名称。

将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。

注意 content属性值为空 visibility 属性不写也可

5.溢出隐藏

给内部有浮动子元素的父元素添加overflow: hidden; 属性，可解决浮动的所有问题。

但该方法实际和清除浮动无关,但有用

!!原理:

元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。

元素高度没设置，若元素同时设置了overflow：hidden属性，元素会自适应内容的高度。

高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。

浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。