## algorithm

### description

You give a the `N × N`image represented by a matrix, wherein the size of each pixel is 4 bytes. Please design an algorithm to rotate the image by 90 degrees.

Can it be done without taking up additional memory space?

Example 1

```Given matrix =
[
[1,2,3],
[4,5,6],
[7,8,9]
],

Rotate the input matrix in place so that it becomes:
[
[7,4,1],
[8,5,2],
[9,6,3]
]```

Example 2

```Given matrix =
[
[5, 1, 9,11],
[2, 4, 8,10],
[13, 3, 6, 7],
[15,14,12,16]
],

Rotate the input matrix in place so that it becomes:
[
[15,13, ​​2, 5],
[14, 3, 4, 1],
[12, 6, 8, 9],
[16, 7,10,11]
]```

### analysis

Two-dimensional array of operations, and require in situ operations, can not open up extra space.

Double loop, first exchange [i][j] position elements with [j][i] position elements one by one , and finally reverse the inner array of the two-dimensional array.

### Code

```/**
* @param {number[][]} matrix
* @return {void} Do not return anything, modify matrix in-place instead.
*/
let rotate = (matrix) => {
for (let i = 0; i <matrix.length; i++) {
for (let j = i; j <matrix[i].length; j++) {
[matrix[i][j], matrix[j][i]] = [matrix[j][i], matrix[i][j]]
}
}
matrix.forEach(row => row.reverse())
};```

## front end

### Introduce BFC and its applications

BFC (block format context) is a block-level format context, a CSS rendering mode in the page box model layout, which is equivalent to an independent container, and the elements inside and external elements do not affect each other

Ways to create BFC

1.html root element 2. float 3. absolute positioning 4. overflow is not visiable 5. display is table layout or flexible layout 6. inline block elements, grid layout, elements whose contain value is layout, content or strict

Characteristics of BFC

1. The internal boxes will be placed one after another in the vertical direction. 2. The vertical distance of the box is determined by the margin. In a BFC, the vertical margins of two adjacent block-level boxes will be folded. 3. In BFC, the left outer edge (margin-left) of each box will touch the left edge (border-left) of the container (for the right-to-left format, it will touch the right edge) 4 .The area where the BFC is formed will not overlap with the float box. 5. When calculating the height of the BFC, the floating elements are also involved

``Interview question 01.07. Rotation matrix: https://leetcode-cn.com/problems/rotate-matrix-lcci/